Multiple Calendar View

[Marios Tasou]

Hello,

Is it possible to achieve such a feat using your JavaScript (ES5) Calendar to create a 3 month calendar ?

[Deepak Ramakrishnan]

Hi Marios, 

  

Thanks for contacting Syncfusion support. 

  

Yes we can achieve your requirement using Syncfusion scheduler component using Year view . Kindly refer the below links for your reference. Also you can specify the number of months to be listed in the component 

  

Online Demo : https://ej2.syncfusion.com/demos/#/bootstrap5/schedule/year.html  

  

Sample Link: https://stackblitz.com/edit/ahq8zh  

  

Demo Link : https://8gs6kb.stackblitz.io/  

  

Kindly get back to us if you have any concerns in it. 

  

Thanks, 

Deepak R. 

[Marios Tasou]

Hello i want to achieve this while using Calendar so i can do the following shown below. I am not sure if this can be done using the Scheduler.

I am using the selected dates to create columns or remove columns depending on the users selected of d

[Deepak Ramakrishnan]

Hi Marios, 

 

Thanks for your update. 

 

We are currently checking the feasibility to include the requested feature in our end . We will update the further details in two business days(27^th,October 2021).We appreciate your patience until then. 

 

Thanks, 

Deepak R. 

[Marios Tasou]

Hello Deepak,

Any Updates on the matter ?

I thought i would wait a few more days as i know you guys are busy.

Kind Regards,

Marios

[Stephenson]

Thanks for sharing all of this content. It helped a lot. 

[Deepak Ramakrishnan]

Hi Marios/ Stephenson, 

 

Thanks for your updates. 

 

We have created the sample as per your requirement and attached below for your reference.In the belo sample we have used following way to achieve your reqirement. 

 

Sample Link : https://stackblitz.com/edit/w3pgxz?file=index.ts  

 

1.Enabled the multi selection option in calendar by using ‘isMultiSelection’  property in all the three components . 

 

let calendar: Calendar = new Calendar({ 

        isMultiSelection: true, 

        change: changeHandler, 

         

    }); 

    calendar.appendTo('#calendar'); 

 

 

API documentation : https://ej2.syncfusion.com/documentation/api/calendar/#ismultiselection   

 

2.Then by using the ‘change’ event (which will get triggered every time when the value is changed) , we have pushed the value to a common variable ‘consolidatedValue’ .And displayed it. 

 

function changeHandler(args){ 

     var consolidatedValue = []; 

 

     if(calendar.values) 

     consolidatedValue.push(calendar.values); 

     if(calendar1.values) 

     consolidatedValue.push(calendar1.values); 

     if(calendar2.values) 

     consolidatedValue.push(calendar2.values); 

 

        let element: HTMLElement = document.getElementById('multiselect'); 

        element.innerHTML = ''; 

        for (let index: number = 0; index < consolidatedValue.length; index++) { 

            element.insertBefore(document.createTextNode(consolidatedValue[index]), element.childNodes[0]); 

            element.insertBefore(document.createElement('br'), element.childNodes[0]); 

        } 

    } 

 

 

API documentation :  https://ej2.syncfusion.com/documentation/api/calendar/#change  

 

3.And we have used ‘navigateTo’ method to navigate to the previous and next month based on the previous or next month button. 

 

 

document.getElementById('prev').addEventListener('click',function(){ 

        

        nextDate = new Date(nextDate.getFullYear(),nextDate.getMonth()-1,nextDate.getDate()); 

        currentDate = new Date(currentDate.getFullYear(),currentDate.getMonth()-1,currentDate.getDate()); 

 

        previousDate = new Date(previousDate.getFullYear(),previousDate.getMonth()-1,previousDate.getDate()) 

         

        calendar.navigateTo('Month',previousDate) 

        calendar1.navigateTo('Month',currentDate) 

        calendar2.navigateTo('Month',nextDate) 

    }) 

     

 

    document.getElementById('next').addEventListener('click',function(){ 

        nextDate = new Date(nextDate.getFullYear(),nextDate.getMonth()+1,nextDate.getDate()); 

        currentDate = new Date(currentDate.getFullYear(),currentDate.getMonth()+1,currentDate.getDate()); 

 

        previousDate = new Date(previousDate.getFullYear(),previousDate.getMonth()+1,previousDate.getDate()) 

         

        calendar.navigateTo('Month',previousDate) 

        calendar1.navigateTo('Month',currentDate) 

        calendar2.navigateTo('Month',nextDate) 

    }) 

 

 

 

API documentation :  https://ej2.syncfusion.com/documentation/api/calendar/#navigateto  

 

 

Thanks, 

Deepak R.