Home > Developer > JavaScript
JQuery calendar management control glDatePicker Usage Details, jquerygldatepicker
This document describes how to use the jQuery calendar management control glDatePicker. We will share this with you for your reference. The details are as follows:
I have been familiar with a calendar management control called FullCalendar. It is very powerful and lists daily events. You can choose to edit and customize your calendar. However, sometimes, on our webpage, we only need a simple calendar, which is Mini but practical. Basic functions such as Calendar highlighting, jump date, date selection, and so on should be available, at this time, FullCalendar is too huge, so I learned about the glDatePicker control.
First look at the effect:
Orange indicates the selected date, blue indicates today's date, and Green indicates the Special Envoy date. It can be understood as a date with a schedule, and the description of the color name may be inaccurate, don't go into it... In addition, you can see that the next two images can jump to the specified date.
This control has multiple skins. You only need to select the corresponding css file that you think looks good. In this example, the default style is used.
This control can also set the date options and Optional options, and can bind data, listen to click events and hover the mouse, and so on.
One thing to note is that the control is a datePicker control, which usually needs to be triggered by other page elements. That is to say, the control is usually followed by an input, but now you need to manage the schedule, instead of date selection, we don't need other controls to appear. Here I use a very primitive solution, that is, to write an empty div and set its width to 200px, the height is 0, and the calendar is always displayed. This basically solves the problem.
The following describes how to quickly use controls:
<link href="glDatePicker.default.css" rel="external nofollow" rel="stylesheet" type="text/css"/><script type='text/javascript' src="jquery-1.9.1.js"></script><script type='text/javascript' src="glDatePicker.min.js"></script><body> <div id="test"></div></body>
#test{ width: 200px; height: 0;}
$ (Function () {$ ('# test '). glDatePicker ({showAlways: true, // always show, you can also click the text box to trigger it. When pure datePicker uses // dowNames: ['day', '1', 'two ', '3', '4', '5', '6'], // monthNames: ['August 1', 'August 1', 'August 30', 'August 30 ', 'octoken', 'octoken'], Chinese specialDates: [{date: new Date (2013, 9, 16), data: jsonObject // jsonObject data, which can be designed as needed}], onClick: function (target, cell, date, data) {// TODO }});})
SpecialDates is the key parameter of the schedule. We can read the data from the database and then pass the data to the control in the predefined format. The value is a list, you can have multiple calendars. Then the onclick event method is compiled. You can pop up a window, open a webpage, and so on.
This section mainly introduces its calendar management application, skipping the explanations of other parameters. For more instructions and Demos, go to the official website.
PS: here we recommend several time and date related tools for your reference:
Online date/day calculator:
Http://tools.jb51.net/jisuanqi/date_jisuanqi
Online date calculator/days calculator:
Http://tools.jb51.net/jisuanqi/datecalc
Online date-days difference calculator:
Http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix timestamp Conversion Tool:
Http://tools.jb51.net/code/unixtime
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
