Dynamic events on calendar

Questions
1

I have created a page with a calendar, but when I try to put my events by ajax it does not work, it seems that the calendar is executed before, that the ajax, this is my code:

return {
    data: function () {
        app.request.get(
        'url_eventos', 
        { 
          funct: 'cargar_eventos', 
        }, function (data) {
          eventos_news = [
              {
                date: new Date(2018, 5, 25, 12, 30),
                title: 'Toni Tmwebs',
              }
          ];
      });
     return {
            today: new Date(year, month, day),
            events: eventos_tm,
          }
    },
   methods: {
      renderEvents: function (calendar) {
        var self = this;
        var currentDate = calendar.value[0];
        var currentEvents = self.events
          .filter(function (event) {
            return (
              event.date.getTime() >= currentDate.getTime() &&
              event.date.getTime() < currentDate.getTime() + 24 * 60 * 60 * 1000
            );
          });
        var eventsHtml = '';
        if (currentEvents.length) {
          eventsHtml = currentEvents
            .map(function (event) {
              var hours = event.date.getHours();
              var minutes = event.date.getMinutes();
              if (minutes < 10) minutes = '0' + minutes;
              return '<li class="item-content">' +
                      '<div class="item-inner">' +
                        '<div class="item-title">' + (event.title) + '</div>' +
                        '<div class="item-after">' + (hours + ':' + minutes) + '</div>' +
                      '</div>' +
                    '</li>';
            })
            .join('');
        } else {
          eventsHtml = '<li class="item-content">' +
                        '<div class="item-inner">' +
                          '<div class="item-title text-color-gray">No events for this day</div>' +
                        '</div>' +
                      '</li>';
        }
        self.$el.find('.list ul').html(eventsHtml);
      },
    },
    on: {
      pageInit: function (e, page) {
        var self = this;
        var app = self.$app;
        var $ = self.$;
        var monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto' , 'Septiembre' , 'Octubre', 'Noviembre', 'Diciembre'];
        self.calendar = app.calendar.create({
          containerEl: '#calendar',
          value: [self.today],
          renderToolbar: function () {
            return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
              '<div class="toolbar-inner">' +
                '<div class="left">' +
                  '<a href="#" class="link icon-only"><i class="icon icon-back ' + (self.$theme.md ? 'color-black' : '') + '"></i></a>' +
                '</div>' +
                '<div class="center"></div>' +
                '<div class="right">' +
                  '<a href="#" class="link icon-only"><i class="icon icon-forward ' + (self.$theme.md ? 'color-black' : '') + '"></i></a>' +
                '</div>' +
              '</div>' +
            '</div>';
          },
          events: self.events.map(function (event) {
            return new Date(event.date.getFullYear(), event.date.getMonth(),  event.date.getDate());
          }),
          on: {
            init: function (calendar) {
              $('.calendar-custom-toolbar .center').text(monthNames[calendar.currentMonth] +', ' + calendar.currentYear);
              $('.calendar-custom-toolbar .left .link').on('click', function () {
                self.calendar.prevMonth();
              });
              $('.calendar-custom-toolbar .right .link').on('click', function () {
                self.calendar.nextMonth();
              });
              self.renderEvents(calendar);
            },
            monthYearChangeStart: function (calendar) {
              $('.calendar-custom-toolbar .center').text(monthNames[calendar.currentMonth] +', ' + calendar.currentYear);
            },
            change: function (calendar) {
              self.renderEvents(calendar);
            },
          }
        });
      },
      pageBeforeRemove() {
        var self = this;
        self.calendar.destroy();
      },
    },
2

You should move your ajax request AFTER calendar initialization and in Ajax callback call:

self.calendar.params.events = [{
  date: new Date(2018, 5, 25, 12, 30),
  title: 'Toni Tmwebs',
}];
self.calendar.update();
self.renderEvents(calendar);
1 Like
3

Doing it as you indicate does not work, it does not update the events, in Ajax callback call, I created the event array and then I created the calendar initialization. Thank you

4

Would be good to see live example or JSFiddle

5 
var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
app.calendar.create({
    containerEl: '#calendar',
	 toolbar: false,
    dateFormat: 'yyyy-mm-dd',
	value: [today],
	rangesClasses:[],
	events: '',
	on: {
            init: function (calendar) {
              $$('.navbar-calendar-title').text(monthNames[calendar.currentMonth] +', ' + calendar.currentYear);

            },
            monthYearChangeStart: function (calendar) {
              $$('.navbar-calendar-title').text(monthNames[calendar.currentMonth] +', ' + calendar.currentYear);
      
            },
            change: function (calendar) {
		
				data = localStorage.getItem('member_calendar');
//ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ постройки мСроприятий ΠΏΠΎ Π½Π°ΠΆΠ°Ρ‚ΠΈΡŽ
renderEvents(calendar, data);

            },
			}
 });
app.calendar.get().params.events  = [today];
app.calendar.get().update();

not work ^(
events no add
How to update events in the calendar?
app.calendar.get().params.events = [today];
app.calendar.get().update();

6

Amazing, this solve dynamic event show on my calendar.