-1

I am using fomantic calendar in my project.The calendar is displayed properly. When the month is changed i want to do some actions.Is there any month change event in the fomantic calendar.Finding it hard to make it work. Thanks for the help in advance.

<div class="ui calendar" id="calendar">
</div>

I have initialized the calendar like this ngOnInit() { $('#calendar').calendar({ type: 'date' }); }

enter image description here

I want to do some actions when i click on the arrow icons as shown in the picture

Dev07
  • 1
  • 2

2 Answers2

1

The Fomantic-UI calendar module has an event onBeforeChange which you can use to determine a year change

  $('.ui.calendar').calendar({
    type: 'date',
    onBeforeChange: function(newDate){
      var oldDate = $(this).calendar('get date');
      if(!oldDate || oldDate.getFullYear() != newDate.getFullYear()) {
        console.log('Year has changed!');
      }
    }
  });
Marco 'Lubber' Wienkoop
  • 85
  • 6
0

After the initialization, if you check out the code generated by Javascript you can see that the left arrow is in a div with class="prev" and the right arrow, in a div with class="next".

So you can do something like this

$('#calendar prev, #calendar next').click(function() {
    //do something
})
sebasaenz
  • 1,917
  • 2
  • 20
  • 25
  • Thanks for ur reply..Unfortunately it didnt work.This is what i have : ngOnInit() { $('#calendar').calendar({ type: 'date' }); } ngAfterViewInit() { $(document).ready(() => { $('#calendar .prev').click(() => { console.log('prev arrow clicked'); }); }); } – Dev07 Feb 21 '20 at 16:23