jQuery UI Widgets › Forums › Editors › Calendar › Dynamically add special days
Tagged: add, addSpecialDate, calendar, delete, jqxCalendar, remove, special date, specialDates, XML
This topic contains 3 replies, has 3 voices, and was last updated by Dimitar 10 years, 7 months ago.
-
Author
-
Hi, I’m trying to dynamically add special days. The idea is that when the user changes the displayed month, it will initiate AJAX request, that will get XML file with the events for the displayed month, this XML will be processed and the special days will be added to the displayed month.
I’m using the following code and a static XML file (just for the testing – it will be generated by PHP on the final website). I would expect that with each viewChange the special days from the XML file will be loaded in the displayed month, but instead they are loaded after the page loads and when the view changes, nothing happens. Any idea, what I’m doing wrong? Maybe I’m completely wrong, I’m not very familiar with JavaScript and JQuery. Thank you very much for your help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Calendar</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css"/> <script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script> <script> function loadXMLDoc(url) { var xmlhttp; var date,title,days,xx,i,eventDate; var eventDate = $('#jqxCalendar').jqxCalendar('getDate'); if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { days=xmlhttp.responseXML.documentElement.getElementsByTagName("DAY"); for (i=0;i<days.length;i++) { xx=days[i].getElementsByTagName("DATE"); { date = xx[0].firstChild.nodeValue; } xx=days[i].getElementsByTagName("TITLE"); { title = xx[0].firstChild.nodeValue; } eventDate = $('#jqxCalendar').jqxCalendar('getDate'); eventDate.setDate(date); $("#jqxCalendar").jqxCalendar('addSpecialDate', eventDate, '', title); } } } xmlhttp.open("POST",url,true); xmlhttp.send(); } </script> </head> <body> <script type="text/javascript"> $(document).ready(function () { $("#jqxCalendar").jqxCalendar({ enableTooltips: true, width: '200px', height: '200px' }); $('#jqxCalendar').on('viewChange', loadXMLDoc('akce.xml')); }); </script> <div id='jqxCalendar'></div> </body> </html>
The XML:
<EVENTS> <DAY> <DATE>08</DATE> <TITLE>Title 1</TITLE> </DAY> <DAY> <DATE>12</DATE> <TITLE>Title 2</TITLE> </DAY> </EVENTS>
Hello Lucie,
The issue seems to be in this block of code:
xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { days = xmlhttp.responseXML.documentElement.getElementsByTagName("DAY"); for (i = 0; i < days.length; i++) { xx = days[i].getElementsByTagName("DATE"); { date = xx[0].firstChild.nodeValue; } xx = days[i].getElementsByTagName("TITLE"); { title = xx[0].firstChild.nodeValue; } eventDate = $('#jqxCalendar').jqxCalendar('getDate'); eventDate.setDate(date); $("#jqxCalendar").jqxCalendar('addSpecialDate', eventDate, '', title); } } }
but it is not related to jqxCalendar, because the if clause is never passed and the addSpecialDate method is thus not invoked.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Do we have something like RemoveSpecialDate or DeleteSpecialDate , I dynamically created the special dates but it changes in the basis of business logic so I want to remove old date and add new date.
Hello hemant.kalal,
Unfortunately, there is no way to remove a specific special date only. To remove all special dates, do the following:
$('#jqxCalendar').jqxCalendar('specialDates', []);
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.