Use datepicker of jquery ui to develop a course calendar

In the past two days, I have developed a business school website that contains a course module. The customer wants to display a calendar on the homepage of the website and add a conspicuous logo on the course date, the website users can see at a glance the calendar day when the business school has a course so that they can schedule the registration.

This function is very interesting. It is consistent with the concept of "creating value for customers" that I and very small companies have always adhered to. It truly considers problems from the perspective of users, what the customer really needs and what is practical is what I like most to develop. Because I feel that products that cannot create value for the customer cannot create value for myself in the end. This world is about cause and effect.

At the beginning, it was quite troublesome to use third-party things. First, it was even more troublesome to study others' interfaces, norms, and other things, it is not as simple as reading others' source code and modifying it. But the calendar is not complicated, but it also requires a certain amount of work to do well, after using google to quickly learn the interfaces, configuration items, and functions of several well-known lightweight calendar plug-ins, we decided not to duplicate the wheel and develop it on the datepicker control of jquery ui, although its functions are simple, the configuration items provided are flexible and can achieve the desired effect without any major adjustments. Besides, it provides a variety of UI styles, I believe there is always a good combination of the website style. Let's take a look at the implementation process. We hope that we can learn from those who need it. We also welcome you to give us valuable suggestions. First, let's take a look at the effect: the figure is circled by a red circle on March 13, April 30, 2013. This is a design convention. if the date is circled, there is a course on that day, click this date to list the courses on this day.

The UI style is actually the blue topic version in jquery ui. Because the website itself uses blue as the tone, the UI with blue themes can be well integrated with the website as a whole, many people may think that datepicker is used to select a date. In the past, there was an input box used to apply it. After clicking the input box, this calendar panel will pop up. After selecting a date, a callback will be triggered, update the selected date back to a specific element, and the mission of the date Selection control is completed. However, what it does here is completely different. Like a calendar, it is only responsible for displaying the date list and marking specific days. Of course, it is more complex and advanced than a calendar, because it is automatically marked in the calendar based on the background course class Date settings.

Implementation Details:

1) how to make datepicker display in the specified place by default, instead of triggered by the input box focus? This is actually very simple. By checking the datepicker api, you can know what the element type is when datepicker is initialized. If it is input, it will wait for the click to trigger, if it is a div, it will be displayed by default. Therefore, you only need to place a div at the position to be displayed, and then use the jquery selector to find this element, you can call the datepicker () method above, for example: $ ('. datePickerWraper '). datepicker ();

2) How to Make datepicker meet the design requirements? This is actually quite simple. I used CSS in combination. My suggestion is not to directly change the jquery ui style, which affects its integrity and independence, its control may be used at that time. If it is changed directly, unexpected situations may occur, I think the better way is to overwrite the default style with your own style under a specific page so that the size of the control conforms to our expectation, which is convenient and flexible.

3) how to add special tags on a specific date? This is the key to the course calendar. First of all, of course class date data is required. The course information array provided by the server will not be described here. I have studied the datepicker api, it is found that it provides a beforeShowDay hook, and all dates will be passed here before rendering. With this mechanism, you can easily add code to this hook and traverse the course list, if the date of the current cell is the same as the course class date, an array variable with three elements is returned, indicating whether the date is optional, the class attribute to be added to the date container and the content displayed when the hover event of the cell is triggered, which is equivalent to the title of. Because this method is used to process each rendering date, as long as the course list is initialized, it will be automatically processed when the user switches the month and year, you do not need to intervene when switching between the year and month. It is very easy to achieve the desired effect.

4) How can I click (select) on a non-course date and click (select) on a course date to display the course list for this day? As mentioned in the third part, the first parameter in the Response Parameter received by beforeShowDay is the flag that can be selected. Therefore, true is returned only when the date of the course class is compared, otherwise, false is returned to control whether the date is optional. However, in the default style, the opacity (opacity) of a non-optional date is 1, that is to say, it is basically in a masked state and looks very incompatible, So I modified its default style through CSS, and in the date on which false is returned, jquery ui automatically changes its date text from a label to a span label, so you don't have to worry about the problem that clicking the anchor will cause errors. When the date of the course is selected, the onSelect event of the control is triggered. the operation in the course list popped up is written in the response method of the onSelect event. The complete code for initializing the control is as follows.

[Javascript]
Var curYear = new Date (). getFullYear ();
$ ('. Calendar'). datepicker ({
YearRange: curYear + ':' + curYear,
PrevText: 'August 11 ',
NextText: 'August 11 ',
YearSuffix: 'Year ',
DateFormat: "yy-mm-dd ",
ShowMonthAfterYear: true,
DayNamesMin: ['day', 'yi', '2', '3', '4', '5', '6'],
MonthNames ', 'August 11', 'August 11', 'August 11'],
OnSelect: function (text, instance ){
Var arr = text. split ('-');
Var year = arr [0], month = arr [1], day = arr [2];
Var curDateTime = new Date (year, month-1, day, 8, 0, 0 );
Var dialogTitle = 'course arrangement for business schools in '+ text + ';
Var curDateCourseList = [];
Var dialogHeight = 40;
For (var I in courseList ){
Var time = courseList [I]. begin_date * 1000;
If (time = curDateTime. getTime ()){
CurDateCourseList. push ("<a title = 'click to View Details 'href ='/course/index. php? Id = "+ courseList [I]. id + "'target = '_ blank'>" + courseList [I]. name + "</a> <span style = 'color: #888; '> location:" + courseList [I]. address + "</span> <br> ");
DialogHeight + = 35;
}
}
$ (". DateCourseList" ).html (curDateCourseList. join (','). dialog ({title: dialogTitle, height: dialogHeight });
$ (". DateCourseList"). dialog ("open ");
Return false;
},
BeforeShowDay: function (date ){
For (var I in courseList ){
Var courseTime = (courseList [I]. begin_date-60x60*8) * 1000;
If (courseTime = date. getTime ()){
Return [true, 'hascourse', 'course Day'];
Break;
}
}
Return [false, 'nocourse', 'no class'];
}
});

Var curYear = new Date (). getFullYear ();
$ ('. Calendar'). datepicker ({
YearRange: curYear + ':' + curYear,
PrevText: 'August 11 ',
NextText: 'August 11 ',
YearSuffix: 'Year ',
DateFormat: "yy-mm-dd ",
ShowMonthAfterYear: true,
DayNamesMin: ['day', 'yi', '2', '3', '4', '5', '6'],
MonthNames ', 'August 11', 'August 11', 'August 11'],
OnSelect: function (text, instance ){
Var arr = text. split ('-');
Var year = arr [0], month = arr [1], day = arr [2];
Var curDateTime = new Date (year, month-1, day, 8, 0, 0 );
Var dialogTitle = 'course arrangement for business schools in '+ text + ';
Var curDateCourseList = [];
Var dialogHeight = 40;
For (var I in courseList ){
Var time = courseList [I]. begin_date * 1000;
If (time = curDateTime. getTime ()){
CurDateCourseList. push ("<a title = 'click to View Details 'href ='/course/index. php? Id = "+ courseList [I]. id + "'target = '_ blank'>" + courseList [I]. name + "</a> <span style = 'color: #888; '> location:" + courseList [I]. address + "</span> <br> ");
DialogHeight + = 35;
}
}
$ (". DateCourseList" ).html (curDateCourseList. join (','). dialog ({title: dialogTitle, height: dialogHeight });
$ (". DateCourseList"). dialog ("open ");
Return false;
},
BeforeShowDay: function (date ){
For (var I in courseList ){
Var courseTime = (courseList [I]. begin_date-60x60*8) * 1000;
If (courseTime = date. getTime ()){
Return [true, 'hascourse', 'course Day'];
Break;
}
}
Return [false, 'nocourse', 'no class'];
}
});