1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. DatePicker remote special dates

DatePicker remote special dates

Hello

I am using ASP.NET CORE EJ 2 version 16.1.0.37 (nuget package).

What would be the best way to load a list of special dates from a server for the currently displayed month?

I tried using the "Navigated" Event to load a list of dates with ajax. Then I save the list in a javascript variable and refresh the DatePicker.
In the "RenderDayCell" event I add the css classes for the special days for those dates that are present in the javascript variable.

Unfortunately, the refresh() method of the DatePicker sets the view back to the default month, thus making it impossible to change the month.


Kind regards
Phil

5 Replies
PK Prem Kumar Madhan Raj Syncfusion Team May 29, 2018 01:02 PM UTC

Hi Phil,   
  
Thanks for contacting Syncfusion Support.   
  
Query1: What would be the best way to load a list of special dates from a server for the currently displayed month.   
  
Answer: We suggest you to make use of the renderDayCell event instead of using navigated event to displaying special days in the DatePicker popup. This is because navigated event gets triggered only when the popup calendar is drill down back forth to change the views whereas renderDayCell event gets triggered while each date cell is being rendered in the calendar popup and will be flexible to compare the obtained from the server with the event argument date values and customize that particular date cell. 

For your convenience, we have created a simple sample using the renderDayCell event to customize a particular date in event month and attached in the below link. Please check it.   
  
  
Query2: Unfortunately, the refresh() method of the DatePicker sets the view back to the default month, thus making it impossible to change the month.   
  
Answer: By default, whenever the DatePicker is refreshed, popup will open showing the current month if value is null else shows the month of the selected date for a valid value. However, we can change this by using the navigateTo method to display any particular month (or any view) as shown in the below code snippet.   
  
<ejs-datepicker id="datepicker" renderDayCell="customDates" cssClass="e-customStyle"open="onOpen"></ejs-datepicker>   
   
<script>   
    function onOpen() {   
        this.navigateTo(this.start, new Date("1/1/2016"))// navigate to the default start view of the specifed date object
    }   
   
</script>   
  
To know more about navigateTo method ,please check out below API documentation link:   
  
  
Regards,   
   
Prem Kumar M

UN Unknown May 30, 2018 07:33 AM UTC

Thank your for your reply.

Sorry, I was not clear enough on what exactly I want to achieve.

The DatePicker shows the days for a month, some of these need to be highlighted. Only if one of these highlighted days is selected can a form be submitted.
When changing the month I want to load the list of days to highlight from a server.

Thanks to your reply I was able to implement my achievement.
Here is the general idea of what I implemented.

var myDays = [];

function onDatePickerRenderDayCell(args) {
     if(current day is in "myDays"){
          //mark cell
     }
}

function onDatePickerNavigated(args) {
     if (args.view === "Month") {
          //load list of days to highlight
          //save list in variable "myDays"
          //navigate to (navigateTo) the date in "args.date" in order to change the month visible in the DatePicker
     }
}

Do you see any problems with this implementation?
If not then this issue is resolved.

PK Prem Kumar Madhan Raj Syncfusion Team May 31, 2018 01:21 PM UTC

Hi Phil, 

Thanks for the update. 

Yes, as your requirement is to load the dates values while navigating through months, you need to load the values on navigated event as per your implementation. Please let us know if you further assistance 

Regards, 

Prem Kumar M

AR Arsenio replied to Prem Kumar Madhan Raj October 19, 2021 09:34 PM UTC

Hello,


I was looking also to implement this fucntionality and downloaded the sample project.


When I run the project I can see tooltip text added but the format is the same as other day.  The color in the style classes has not effect on the DatePicker.


We are using the current version of the DatePicker so probably the classes has change, if that the case could please update the sample project ?

 

Regards,


Arsenio


DR Deepak Ramakrishnan Syncfusion Team October 25, 2021 04:37 PM UTC

Hi Arsenio, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in our end. And we request you refer the below code snippet and demo for special dates for your reference. 
 
 
@using Syncfusion.EJ2 
 
@section ControlsSection{ 
    <div class=" control-section"> 
        <div id="wrapper" class="datepicker-section"> 
            <div id="datepicker-control"> 
                <ejs-datepicker id="datepicker" value="ViewBag.value" renderDayCell="customDates" cssClass="e-customStyle"></ejs-datepicker> 
            </div> 
        </div> 
    </div> 
} 
 
<script> 
    var addClass = ej.base.addClass; 
    function customDates(args) { 
        /*Date need to be customized*/ 
        var span; 
        if (args.date.getDate() === 10) { 
            specialDate(args, "Birthday"); 
        } 
        if (args.date.getDate() === 15) { 
            specialDate(args, "Farewell"); 
        } 
        if (args.date.getDate() === 25) { 
            specialDate(args, "Vacation"); 
        } 
    } 
 
    function specialDate(args, name) { 
        span = document.createElement('span'); 
        span.setAttribute('class', 'e-icons highlight'); 
        args.element.firstElementChild.setAttribute('title', name + '!'); 
        addClass([args.element], ['e-day', 'special', name.toLowerCase()]); 
        args.element.setAttribute('data-val', name + '!'); 
        args.element.setAttribute('title', name + '!'); 
        args.element.appendChild(span); 
    } 
</script> 
 
 
Thanks, 
Deepak R. 


Loader.
Up arrow icon