Jquery plug-in fullcalendar calendar for scalable Google Calendar

This introduction jquery calendar fullcalendar plug-in is a very good calendar tool that can be used to create calendars or schedules. It can expand the Google Calendar function and create personalized calendars, you can also bind click events or drag events, which are very convenient to use as follows: <br/> jquery plug-in fullcalendar calendar to achieve scalable Google Calendar function <br/> jquery plug-in fullcalendar online instance </P> <p> http://arshaw.com/fullcalendar/ </P> <p> instructions <br/> jquery library files and jquery UI library files and fullcalendar library files are required </P> <p> http://jquery.com/</P> <p> http://plugins.jquery.com/project/fullcalendar </P> <p> http://ui.jquery.com/</P> <p> Use fullcale Ndar.css file </P> <p> Use instance <br/> 1, including the file part </P> <p> 1. <LINK rel = 'stylesheet 'type = 'text/CSS' href = "fullcalendar/fullcalendar.css" mce_href = "fullcalendar/fullcalendar.css"/> <br/> 2. <MCE: Script Type = 'text/JavaScript 'src = "jquery/jquery. JS "mce_src =" jquery/jquery. JS "> </MCE: SCRIPT> <br/> 3. <MCE: Script Type = 'text/JavaScript 'src = "jquery/UI. core. JS "mce_src =" jquery/UI. core. JS "> </MCE: SCRIPT> <br/> 4. <MCE: SC Riptype = 'text/JavaScript 'src = "fullcalendar/fullcalendar. JS "mce_src =" fullcalendar/fullcalendar. JS "> </MCE: SCRIPT> </P> <p> if you need to bind a drag event, you can add a UI. draggable. JS file </P> <p> 1. <MCE: Script Type = 'text/JavaScript 'src = "jquery/UI. draggable. JS "mce_src =" jquery/UI. draggable. JS "> </MCE: SCRIPT> </P> <p> 2. html part </P> <p> 1. <Div id = 'calendar '> </div> </P> <p> 3. Javascript part </P> <p> 1. <MCE: Script Type = 'text/JavaScript '> <! -- <Br/> 2. $ (document ). ready (function () {<br/> 3. vaR d = new date (); <br/> 4. var y = D. getfullyear (); <br/> 5. vaR M = D. getmonth (); <br/> 6. $ ('# calendar '). fullcalendar ({<br/> 7. draggable: True, <br/> 8. events: [<br/> 9. {<br/> 10. ID: 1, <br/> 11. title: "Learning jquery", <br/> 12. start: new date (Y, M, 6, 14, 0), <br/> 13. end: new date (Y, M, 11) <br/> 14 .}, <br/> 15. {<br/> 16. ID: 2, <br/> 17. title: "Daily excellent blog writing", <br/> 18. start: new date (Y, m, 2) <br/> 19 .}, <br/> 20. {<br/> 21. ID: 2, <br/> 22. title: "Daily excellent blog writing", <br/> 23. start: new date (Y, M, 9) <br/> 24 .}, <br/> 25. {<br/> 26. ID: 3, <br/> 27. title: "meeting", <br/> 28. start: new date (Y, M, 20, 9, 0) <br/> 29 .}, <br/> 30. {<br/> 31. ID: 4, <br/> 32. title: "view Facebook", <br/> 33. start: new date (Y, M, 27, 16), <br/> 34. end: New Date (Y, M, 29), <br/> 35. URL: "http://facebook.com/" <br/> 36 .} <br/> 37.] <br/> 38 .}); <br/> 39 .}); <br/> 40. <br/> // --> </MCE: SCRIPT> </P> <p> the Javascript section mainly sets the schedule. Each section is as follows: </P> <p> 1. vaR d = new date (); <br/> 2. var y = D. getfullyear (); <br/> 3. vaR M = D. getmonth (); </P> <p> get time, use getfullyear () and getmonth () get the year and month respectively </P> <p> draggable indicates whether the schedule can be dragged <br/> events indicates the specific schedule, in the following format: </P> <p> 1. [{<br/> 2. ID: 1, <br/> 3. title: "Learning jquery", <br/> 4. start: new date (Y, M, 6, 14, 0), <br/> 5. end: new date (Y, M, 11) <br/> 6.}] </P> <p> note that an array [] contains JSON data, including ID, title, start, and end. Each ID represents a specific event arrangement. </P> <p> 1. You can use dynamic ajax to load JSON data on the schedule. For details, see the source code of the instance, as shown in the following figure: </P> <p> 1. <MCE: Script Type = 'text/JavaScript '> <! -- <Br/> 2. $ (document ). ready (function () {<br/> 3. $ ('# calendar '). fullcalendar ({<br/> 4. draggable: True, <br/> 5. events: "json_events.php", <br/> 6. eventdrop: function (event, Delta) {<br/> 7. alert (event. title + 'was moved' + Delta + 'days/N' + <br/> 8. '(shocould probably update your database)'); <br/> 9 .}, <br/> 10. loading: function (bool) {<br/> 11. if (bool) $ ('# loading '). show (); <br/> 12. else $ ('# loading '). hide (); <br/> 13 .} <br/> 14 .}); <br/> 15 .}); <br/> 16. <br/> // --> </MCE: SCRIPT> </P> <p> events directly calls the PHP file to obtain JSON data, implement eventdrop and load loading events simultaneously </P> <p> 2. Implement Google Calendar extension. You can view the source code of the instance as follows: </P> <p> 1. <MCE: Script Type = 'text/JavaScript '> <! -- <Br/> 2. $ (document ). ready (function () {<br/> 3. $ ('# calendar '). fullcalendar ({<br/> 4. events: $. fullcalendar. gcalfeed (<br/> 5. 'http: // www.google.com/calendar/feeds/', <br/> 6. {draggable: false, classname: 'mygcal'} <br/> 7 .), <br/> 8. eventclick: function (event) {<br/> 9. window. open (event. URL, 'calevent', 'width = 700, Height = 600 '); <br/> 10. return false; <br/> 11 .}, <br/> 12. loading: F Unction (bool) {<br/> 13. if (bool) $ ('# loading '). show (); <br/> 14. else $ ('# loading '). hide (); <br/> 15 .} <br/> 16 .}); <br/> 17 .}); <br/> 18. <br/> // --> </MCE: SCRIPT> </P> <p> events call $. fullcalendar. gcalfeed () method to obtain Google Calendar data, while implementing eventclick and loading events </P> <p> using the jquery plug-in fullcalendar calendar is very simple, you only need to specify specific calendar events, A calendar plan can be implemented, and the Google Calendar function can be expanded, which is highly recommended. </P> <p> fullcalendar plug-in official website </P> <p> http://arshaw.com/fullcalendar/ </P> <p> fullcalendar plug-in online documentation </P> <p> http://arshaw.com/fullcalendar/docs/ </P> /P> <p> fullcalendar plug-in online download </P> <p> http://arshaw.com/fullcalendar/download/