1. Home
  2. Forum
  3. Angular - EJ 2
  4. Create Calendar

Create Calendar

Hi ! Could I create calendar like this

4 Replies
DL Deepa Loganathan Syncfusion Team October 10, 2018 10:31 AM UTC

Hi Ali Kholmatov,    


  
We are sorry, but your requirement to a have multiple month views in Calendar is not possible with our Calendar control.   
  
Please let us know if you have any further queries.   


  
Regards,    
Deepa L.  


AK Ali Kholmatov October 10, 2018 10:34 AM UTC

yes but  I can use array and min and max date . I need more to know how custom this ( example add click event on day of the week and icon + )

AK Ali Kholmatov replied to Deepa Loganathan October 10, 2018 10:35 AM UTC

Hi Ali Kholmatov,    


  
We are sorry, but your requirement to a have multiple month views in Calendar is not possible with our Calendar control.   
  
Please let us know if you have any further queries.   


  
Regards,    
Deepa L.  


Please !!!

DL Deepa Loganathan Syncfusion Team October 11, 2018 11:48 AM UTC

Hi Ali Kholmatov, 
 
Yes, you can customize the Calendar component as per to your application requirement by using a range of APIs available in our Calendar.  
 
 
Query: array and min and max date 
 
Calendar component has multiselection feature that allows selection of array of dates using isMultiSelection and values APIs.  

Please check out our below help pages to know more about the multiselection feature.  



You can restrict the date selection by using min and max APIs and is explained the below help page. 


Query: add click event on day of the week 
 
Yes, you can achieve this requirement by using change event available in Calendar.  Change event will be triggered upon interaction with the Calendar elements and the currently selected value will be available in the event arguments as given below.  
 
function valueChange(args: ChangedEventArgs): void { 
    let title: string = ''; 
    /*Displays selected date in the label*/ 
    if (args.event) { 
        title = (<HTMLElement>args.event.currentTarget).getAttribute('data-val'); 
        title = title === null ? '' : ' ( ' + title + ' )'; 
    } 
    (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString() + title; 
 
} 
 
 

You can then format the value to the required format using the methods available in our localization library to get the details of the date selected and trigger an action based on the selected value. 


Query: Add Icon to special dates 
 
You can highlight special dates of Calendar by adding Icons, title etc., This is showcased in our live demo sample. Please check. 


 
this.default = (): void => { 
    let calendar: Calendar = new Calendar({ 
        renderDayCell: customDates, change: valueChange 
    }); 
    calendar.appendTo('#calendar'); 
}; 
 
 


Here we have bound a method to renderDayCell event that is triggered whenever a new element is added to the Calendar. You can use this method to customize the elements as per your need as given below.  
 
 
function customDates(args: RenderDayCellEventArgs): void { 
    /*Date need to be customized*/ 
    if (args.date.getDate() === 10) { 
        let span: HTMLElement; 
        span = document.createElement('span'); 
        span.setAttribute('class', 'e-icons highlight'); 
        args.element.firstElementChild.setAttribute('title', 'Birthday !'); 
        addClass([args.element], ['e-day', 'special', 'birthday']); 
        args.element.setAttribute('data-val', ' Birthday !'); 
        args.element.setAttribute('title', 'Birthday !'); 
        args.element.appendChild(span); 
    }  
 
 
 
Please let us know if you have any further queries. 

You can find more options on customizing the Calendar is available in the How-To section of our help page. 


Please let us know if you have any further queries. 

Regards,  
Deepa L. 


Loader.
Up arrow icon