JQuery calendar management control glDatePicker Usage Details, jquerygldatepicker

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.