Home > Developer > Web Develop
With regard to the calendar control, I have made several attempts to develop an easy-to-use calendar control. My idea is to try to quote this control, a line of JS code can be used to make a calendar, if you add a few parameters, you can customize the appearance and function of a colorful calendar. Calendar 3.1 is my initial satisfaction of a work.
There are two common scenes of the calendar, one is used in the date selector, such as a location need to enter a date, click the input box will pop up a calendar to choose a date, the other is a simple display, in the page somewhere to display the calendar, the general role of Decoration, many blog home will have this calendar. My previous essay is all about the first kind of calendar, and the Calendar 3.1 is the second one to be introduced today. Interested friends can go to my GitHub homepage to view, Https://github.com/dige1993/calendar.git
First of all, of course, look at the effect, first look at a piece of pigment:
Then specify a number of parameters in the call procedure, you can define a more beautiful calendar, here is just a demonstration, on a red and green with the ugly Picture:
When the area width is less than 200px, you will be prompted not to display the calendar properly:
Next look at the use of this control.
First of all, it is customary to refer to the jquery Library and Calendar-3.1-js, and then prepare a width>=200px div, highly adaptive content, if the div ID is test, just a sentence calendar_init ($ ("#test ") to display the calendar within the Div. The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Calendar 3.1</title><Scriptsrc= "Js/jquery-2.1.1.min.js"></Script><Scriptsrc= "Js/calendar-3.1.js"></Script><Scripttype= "Text/javascript">$ (document). Ready (function(e) {calendar_init ($ ("#test"));//display a calendar in a id=test div});</Script><style>#test{width:200px;Height:Auto;Overflow:Hidden;Border:Solid 1px;Margin-bottom:20px;}</style></Head><Body> <DivID= "Test"></Div></Body></HTML>
The above is the color effect of the code, if you want to customize the UI, you can call Calendar_init () when you add the second parameter. The code for the makeup is as follows:
Calendar_init ($ ("#test"), { title_color: "Yellow", title_bg_color: "Red", Day_color: "Brown", Day_bg_color: "Green", date_bg_color: "Pink", Date_color: "Blue", date_active_color: "Red" });The second parameter of the Calendar_init function is optional, the type is the object containing the key-value pairs, and the following table describes the meaning of each key of the parameter and its value:
| parameters | Meaning and value |
| Title_bg_color | the background color of the year and month area, the value follows the web color value specification, the default transparency |
| title_color | month area, including the foreground color of those buttons, followed by the web color value specification, default transparent |
| Line_style | The style of the divider line for the month and week area, followed by the CSS border value specification, default: solid 1px |
| day_bg_color | Week area background color, value follows web color value specification, default transparent |
| day_color | The font color of the week area, the value follows the web color value specification, the default transparency |
| date_bg_color | Date Area background color, value follows web color value specification, default transparency |
| date_color | Date Area font color, value follows web color value specification, default transparency |
| Date_active_color | The background color of the current date, the value follows the web color value specification, the default transparency |
| line_height | row height, default 30px |
The first argument to the Calendar_init function is a required item that indicates in which container the calendar is displayed. If the width of the container is less than 200px, the error will appear in the 3rd image above. For more information, please visit my GitHub home page: Https://github.com/dige1993/calendar.git
Web Calendar Display Control calendar3.1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
