jQuery UI Widgets › Forums › Editors › Calendar › Dynamically add special days

Tagged: , , , , , , , ,

This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 10 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Dynamically add special days Posts
  • March 25, 2014 at 12:44 pm Dynamically add special days #51845

    Lucie
    Participant

    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>
    March 26, 2014 at 8:21 am Dynamically add special days #51913

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    April 13, 2014 at 8:34 pm Dynamically add special days #53004

    hemant.kalal
    Participant

    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.

    April 14, 2014 at 8:13 am Dynamically add special days #53025

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.