[SOLVED] Framwork calendar

1

How to update calendar events?

We need to update calendar event when press on next previous month or year click. I need to update events month wise not load every at once. So how i can update event in f7 calendar?

2

Hi,
So i dont understand what you mean with “UPDADTE”. you want to listen when a month change?

monthYearChangeStart OR calendarMonthYearChangeStart calendar (calendar, year, month) Event will be triggered in the begining of transition to next month

https://framework7.io/docs/calendar.html#app-and-calendar-instance-events

3

Sorry for my bad english and thanks for reply,

I mean is that, i am using calendar for events render.

Currently f7 has way to set event array at the time of initalize but i have large event array and that is not fisible to render all event from once so i need to split event month wise.

When calendar load at that time we only renders that month event and when we click on next and prev month at that time we grab event from ajax and set to that month.

So any way exists to update event of that month only

4

im not understanding fully what you need. my native language is Spanish. So every time you change the month you bind events to each day of the calendar?
you can try to destroy your calendar when the month change, get the data from the backend and create it again.

5

Thanks for reply,

Yes thay will be last way but if any way to append events to calendar then its would be easy i think.

6

you can listen to any calendar event.

https://framework7.io/docs/calendar.html#app-and-calendar-instance-events

calendar.on(event, handler)	Add event handler

so:
eg

...
calendar.on('monthYearChangeStart', myHandler)
...

function myHandler (calendar, year, month) {
  ...
  // do your magic here!
 ...
}

or

...
calendar.on('dayClick', myHandler2)
...

function myHandler2 (calendar, dayEl, year, month, day) {
  ...
  // do more magic here!
 ...
}
7

Thanks,

I know this events and currently i am using this bus on month change every time we destroy calendar and reinit that is not way and also when you swipe/slide calendar to next month at that time we reinit after destroy calendar then its will directly display on ui.

If we can add events without destroy calendar that is good i think if any one have answers then please let me know.

Thanks again pal to watching my question

8

You can add your own custom events. Just use calendar.on(‘myevt’)
And
Calendar.emit(‘myevt’)

Again I don’t understand what you really need. Can you share some code? Even better. Make a jsfiddle.

9 
var DATA=[
  {
    date: new Date(2018, 11, 1),
    color: '#4caf50',
  },
  {
    date: new Date(2018, 11, 1),
    color: '#FF0000',
  },
  {
    date: new Date(2019, 0, 1),
    color: '#4caf50',
  },
  {
    date: new Date(2019, 0, 1),
    color: '#FF0000',
  },
  {
    date: new Date(2019, 1, 1),
    color: '#4caf50',
  },
  {
    date: new Date(2019, 1, 1),
    color: '#FF0000',
  },
  {
    date: new Date(2019, 2, 1),
    color: '#4caf50',
  },
  {
    date: new Date(2019, 3, 1),
    color: '#FF0000',
  }
];

app.calendar.create({
  inputEl:'.page-content',
  value:[new Date()],
  seen:[],
  events:[],
  getEvents:function(cal,obj){
    var self=this,cal=cal,obj=obj;
    var check=self.seen.filter(function(itm){
      return (itm.year==obj.year && itm.month==obj.month);
    });
    if (check.length){
      console.log('already seen');
      return;
    }
    setTimeout(function(){//ajax
      DATA.map(function(itm){
        if (itm.date.getFullYear()==obj.year && itm.date.getMonth()==obj.month){
          cal.params.events.push(itm);
        }
      });
      self.seen.push(obj);
      cal.update(); 
    },1000);
  },
  on:{
    monthYearChangeStart:function(c){
      c.params.getEvents(c,{year:c.currentYear,month:c.currentMonth});
    }
  }
}).open();
1 Like
10

Thanks,

I will try if its works its best for me and its as per my requirement. Thanks again

11

just go to http://framework7.io/kitchen-sink/core/?theme=ios
open console
and copy/paste the above code
an see how it’s working

1 Like
12

Thanks Genius, Its working as per my requirement