DatePicker Development Course Calendar using the jquery UI

These two days in the development of a business school website, there are modules involved in the course, the customer would like to display a calendar on the homepage of the website, with the date of the course with a prominent logo, so that users can see the calendar at a time when the business school has a course so that they will be scheduled to enroll in the study.

This function is very interesting, in line with my and very churlish company has been adhering to the "Create value for customers" concept, it really from the user's point of view, the customer really need, practical things are my favorite product development because I think the product can not create value for customers will ultimately not create value for themselves, This world is about cause and effect.

At first, it was kind of troublesome to use a third party thing, one to study the interface of others, specifications, such as a large pile of things, there is no place to meet the requirements of the time is even more trouble, to read other people's source code and then modify, but also to their own new development come directly simple, but the calendar this thing, said complex not complex, But to do well also has a certain amount of work, using Google to quickly understand the current several more well-known lightweight calendar Plug-ins interface, provide configuration items and features, decided not to repeat the manufacture of wheels, the jquery UI DatePicker control development, because it is simple, But provide a more flexible configuration items, do not need to undergo a large adjustment to achieve the desired effect, and own a variety of UI style, I believe there is always a good with the style of the site to integrate, hehe. No more nonsense to say, the following to see the process of realization, I hope to be able to be used by friends to learn from, but also welcome the great God to make valuable suggestions. First look at the effect: the picture of April 30, 2013 by a red circle live, this is a design of a convention, the date was circled to show that the day is a course, click on this date and then list the course of the day.

The UI style is actually the blue theme version of the jquery UI, because its Web site is in the blue tone, so the blue theme of the UI can be integrated with the site is very good, perhaps many people think that DatePicker is used to choose the date, before When you apply it, you have an input box, click the input box to pop up this calendar panel, select a date to trigger the callback, the selected date to update back to a specific element, the date select the control mission is completed, but here, it does a completely different thing. It is like a calendar, only responsible for displaying a list of dates and marking the role of a specific day, of course, it is more complex and advanced than the calendar, because it is based on the background of the course date set to automatically mark the calendar.

Details of implementation:

1 How do I get datepicker to be displayed in the specified place instead of by the input box focus? This is actually very simple, through the DatePicker API can know DatePicker initialization will automatically determine what type of element is called it, if it is input, it will wait for the click of the trigger, if it is div, it will be displayed by default, so, here, Just put a div in the position you want to display, and then use the jquery selector to find the element, and invoke the DatePicker () method on the above, example: $ ('. Datepickerwraper '). DatePicker ();

2 How to make DatePicker meet the design requirements? This is actually also simple, with CSS, my advice is not directly in the jquery UI style above, to affect its own integrity and independence, then may use its control, if the direct change will lead to some unexpected circumstances occur, I think the better way is to cover the default style with your own style on a specific page so that the size of the control fits our expectations, that is, convenient and flexible.

3 How to add special marks on a specific date? This is the key to the curriculum calendar. The first, of course, is the data that requires the course start date, the array of course information provided by the server, and the DatePicker API, discovered that it provides a beforeshowday hook, all of which will pass through here before rendering, It's a good mechanism to do that. Add code to the hook, iterate through the course list, and return an array variable with three elements, representing whether the date is optional, the class attribute to be added to the date container, and the single The content displayed when the Wenge hover event is triggered is equivalent to the title of A. Because each rendering date will be processed by this method, so long as the course list initialization, in the user switch month and year will be automatically processed, do not need to switch year months when intervention, very simple to achieve the desired effect.