Dates And Data in Database Different From The Ones in HTML

[skizzy]

I really like this Calender. Kudos to the developers behind it.

I want to use this calendar for a booking site. The calendar will show booked dates by user and name of the room booked. I built my webapp with Python/Django. After following the 'full example' in the docs, the data I have in my database is different from the ones on the calendar.

In my database, I have these dates:

For a Hotel with Room 1 named Love Room

Check-in : 2017, 03, 10 Check-out: 2017, 03, 19

But it's showing me the below dates in the calendar

startDate: new Date(2016, 6, 1), endDate: new Date(2016, 6, 14)

For another Hotel with Room 1 named Mingle Room

Check-in : 2017, 06, 15 Check-out: 2017, 06, 18

But it's showing me the below dates in the calendar

startDate: new Date(2016, 6, 4), endDate: new Date(2016, 6, 16)

startDate: new Date(2016, 12, 19), endDate: new Date(2016, 12, 22)

CODE

          <script type="text/javascript" class="publish">
               function editEvent(event) {
                    $('#event-modal input[name="event-index"]').val(event ? event.id : '');
                    $('#event-modal input[name="event-name"]').val(event ? event.name : '');
                   $('#event-modal input[name="event-location"]').val(event ? event.location : '');
                   $('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');
                  $('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : '');
                 $('#event-modal').modal();
             }

  function deleteEvent(event) {
       var dataSource = $('#calendar').data('calendar').getDataSource();

       for(var i in dataSource) {
         if(dataSource[i].id == event.id) {
             dataSource.splice(i, 1);
             break;
           }
       }

             $('#calendar').data('calendar').setDataSource(dataSource);
      }

    function saveEvent() {
            var event = {
                  id: $('#event-modal input[name="event-index"]').val(),
                  name: $('#event-modal input[name="event-name"]').val(),
                   location: $('#event-modal input[name="event-location"]').val(),
                 startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
                endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate')
            }

           var dataSource = $('#calendar').data('calendar').getDataSource();

            if(event.id) {
                for(var i in dataSource) {
                    if(dataSource[i].id == event.id) {
                        dataSource[i].name = event.name;
                      dataSource[i].location = event.location;
                     dataSource[i].startDate = event.startDate;
                      dataSource[i].endDate = event.endDate;
                 }
             }
        }
           else
       {
               var newId = 0;
                  for(var i in dataSource) {
                      if(dataSource[i].id > newId) {
                       newId = dataSource[i].id;
               }
           }

               newId++;
              event.id = newId;

              dataSource.push(event);
              }

             $('#calendar').data('calendar').setDataSource(dataSource);
                    $('#event-modal').modal('hide');
            }

            $(function() {
            var currentYear = new Date().getFullYear();

           $('#calendar').calendar({ 
                enableContextMenu: true,
               enableRangeSelection: true,
               contextMenuItems:[
               {
                   text: 'Update',
                  click: editEvent
               },
             {
                  text: 'Delete',
                  click: deleteEvent
             }
           ],
                selectRange: function(e) {
                     editEvent({ startDate: e.startDate, endDate: e.endDate });
             },
                mouseOnDay: function(e) {
                     if(e.events.length > 0) {
                            var content = '';

                for(var i in e.events) {
                 content += '<div class="event-tooltip-content">'
                                + '<div class="event-name" style="color:' + e.events[i].color + '">' +  e.events[i].name + '</div>'
                                + '<div class="event-location">' + e.events[i].location + '</div>'
                            + '</div>';
            }

            $(e.element).popover({ 
                trigger: 'manual',
                container: 'body',
                html:true,
                content: content
            });

            $(e.element).popover('show');
           }
         },
        mouseOutDay: function(e) {
             if(e.events.length > 0) {
             $(e.element).popover('hide');
           }
         },
              dayContextMenu: function(e) {
                           $(e.element).popover('hide');
               },
                dataSource: [
                 {% for mydate in get_all_date %}
                   {
                             id:  {{ forloop.counter0 }},
                             name: '{{mydate.hotelrooms.room_name }}',
                              location: '{{mydate.booked_by }}',
                             startDate: new Date({{mydate.checkin_booked_date|date:"Y, n, j" }}),
                              endDate: new Date({{mydate.checkout_booked_date|date:"Y, n, j" }})
                      },
                   {% endfor %}
                 ]

                });
         });

        </script>

Is it a bug with the calendar? or how do I go aboutshowing the right date in calendar from database?

[William-H-M]

The only thing I saw that was wrong is the part on the 'n' (I suppose that means "Month") is not on 0 based; Now about the weird showing dates I know nothin of Python/Django but what I understand is that you're fetching the data with {{mydate.checkin_booked_date|date:"Y, n, j" }} and you're givin the formar "Year, Month, Day" Can you please try to set datasource this way and print the array too, to check out if it's JS new Date who's doing things wrong:

` var myData = []; for (var i = 0; i < Identificacion.length; i++) { //{% for mydate in get_all_date %} myData.push({ id: Identificacion[i], name: Name[i], startDate: new Date( parseInt(AñoIn[i]), parseInt(MesIn[i]-1), (DiaIn[i]), parseInt(HorasIn[i]), parseInt(MinutosIn[i])), //StartDate[i], endDate: new Date( parseInt(AñoFin[i]), parseInt(MesFin[i])-1, (DiaFin[i]), parseInt(HorasFin[i]), parseInt(MinutosFin[i])),//EndDate[i],
location: Location[i]
}); };

            var dataSource = $('#calendar').data('calendar').getDataSource();
            dataSource = myData;
            $('#calendar').data('calendar').setDataSource(dataSource);`

[skizzy]

The n is in month. You can get the idea here. https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#date

For the js code you wrote, what function should I change in the template? I don't know js that much.

[William-H-M]

In the template take out the option dataSource: [ {% for mydate in get_all_date %} { id: {{ forloop.counter0 }}, name: '{{mydate.hotelrooms.room_name }}', location: '{{mydate.booked_by }}', startDate: new Date({{mydate.checkin_booked_date|date:"Y, n, j" }}), endDate: new Date({{mydate.checkout_booked_date|date:"Y, n, j" }}) }, {% endfor %} ]

Change it with $('#calendar').calendar({"options here"}); var Year; var Month; var Month; var myData = []; {% for mydate in get_all_date %} Year= {{mydate.checkin_booked_date|date:"Y" }}; Month= {{mydate.checkin_booked_date|date:"n" }} - 1; to get the month starting with 0 Day= {{mydate.checkin_booked_date|date:"j" }} - 1; myData.push({ id: {{ forloop.counter0 }}, name: {{mydate.hotelrooms.room_name }}, startDate: new Date( parseInt(Year), parseInt(Month), parseInt(Day) ) , endDate: new Date( parseInt(Year), parseInt(Month), parseInt(Day + 3) ) , //Added 3 days just as test case location: '{{mydate.booked_by }}' }); };

And then load the DataSource with this var dataSource = $('#calendar').data('calendar').getDataSource();

dataSource = myData; $('#calendar').data('calendar').setDataSource(dataSource);`

BTW You should try with the simple options first something like mine on the attached image

[skizzy]

When I insert the dates in the docs, I works fine. I understand that js starts from 0 with months. I expect the calendar to display on April 10-19, 2017. But showing on July 1-14, 2016 is what baffles me. I'd been it shows that way, I would have adjust it to make it read based on javascript 0 months reading.

Now after posting your code, the calendar didn't show up.

   <script type="text/javascript" class="publish">
         $(function() {
                    $('#calendar').calendar();
         var Year;
             var Month;
          var Day;
                   var myData = []; 
                   {% for mydate in get_all_date %} 
                  Year= {{mydate.checkin_booked_date|date:"Y" }}; 
                 Month= {{mydate.checkin_booked_date|date:"n" }} - 1; 
                 //to get the month starting with 0 
                Day= {{mydate.checkin_booked_date|date:"j" }} - 1; myData.push({ id: {{ forloop.counter0 }}, name: {{mydate.hotelrooms.room_name }}, startDate: new Date( parseInt(Year), parseInt(Month), parseInt(Day) ) , endDate: new Date( parseInt(Year), parseInt(Month), parseInt(Day + 3) ), 
                //Added 3 days just as test case 
                 location: '{{mydate.booked_by }}' 
              {% endfor %}
            }); 

            var dataSource = $('#calendar').data('calendar').getDataSource();
               $('#calendar').data('calendar').setDataSource(dataSource);
               });

I replaced my the whole of my code with yours. Kindly check the code I posted if I miss anything or parenthesis or semi-colon.

[William-H-M]

There's a extra ' }); ' after {% endfor %} ; Now with this same set up, but data fetched from MSSQL and ASP, is working for me can you run the code and show console message on the web browser to see if is there any weird error and print myData with console.log(myData ) to see what is actually fetching the array should be something like this (Firefox)

[skizzy]

Not still showing the calendar, look at the source code below.

  <script type="text/javascript" class="publish">
               $(function() {
                   $('#calendar').calendar();

                var Year;
                    var Month;
                 var Day;
                     var myData = []; 

                  Year= 2016; 
                  Month= 6 - 1; 
                       //to get the month starting with 0 
                              Day= 1 - 1; myData.push({ id: 0, name: Mongo FC Suites, startDate: new Date(           parseInt(Year), parseInt(Month), parseInt(Day) ) , endDate: new Date( parseInt(Year), parseInt(Month),  parseInt(Day + 3) ), //Added 3 days just as test case 
                                     location: 'Dave Mason' 

                           });
                    }); 

                   var dataSource = $('#calendar').data('calendar').getDataSource();
                       $('#calendar').data('calendar').setDataSource(dataSource);
                    });
                  </script>

[skizzy]

Thanks for the support William! So sorry for disturbing you. I've fixed it. I was getting dates from the booked DB table instead of the Calendar DB table. I was tired last night!

Thanks again man. You rock.