1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Add a range to Scheduler

Add a range to Scheduler

Hi! I need to add a range to the scheduler. 
Currently, when I bring the data to show in the calendar, I bring everything in the database. I'd like to add a range of dates, so I could filter the data. 
I want to set this range to the different views, so when the user changes view, I bring the corresponding data. 
My doubt is the following: where are you handling the click of these views, the field where you can choose the month/years and the arrows? 




 I´m working with ASP.Net Core and Angular JS. 

I would appreciate very much your help, thank you 

7 Replies
RV Ravikumar Venkatesan Syncfusion Team March 24, 2020 01:09 PM UTC

Hi Juan, 

Greetings from Syncfusion support. 

Based on your requirement we have prepared the sample with the help of actionComplete, navigating event and getCurrentViewDates method of EJ2 Schedule. 

Q1. You can get the current view date range from the getCurrentViewDates method in after the view or date navigation like the below. 

<ejs-schedule id="schedule" currentView="Month" actionComplete="onActionComplete"></ejs-schedule> 
 
<script> 
    function onActionComplete(args) { 
        if (args.requestType === "viewNavigate" || args.requestType === 'dateNavigate') { 
            var scheduleObj = document.getElementById('schedule').ej2_instances[0]; 
            // You can get current view dates below. 
            console.log(scheduleObj.getCurrentViewDates()); 
        } 
    } 
</script> 

Q2. The navigating event is triggered when the view button clicked. You can use it like below. 

<ejs-schedule id="schedule" currentView="Month" navigating="onNavigating"></ejs-schedule> 
 
<script> 
    function onNavigating(args) { 
        // Navigating event is triggered when view change. 
    } 
</script> 


Kindly try the above sample and get in touch with us if you would need any further assistance. 

Regards, 
Ravikumar Venkatesan 


JM Juan Manuel Gago April 2, 2020 12:28 AM UTC

Thank you, Ravikumar. The example works perfect, it's what I need ! 

I have a couple more doubt, I hope you can help me too.

Question 1 : 
I add this to my code

      <e-schedule-resources>
            <e-schedule-resource dataSource="@ViewBag.Technicians" field="TechnicianUserID" title="Technician" name="Technicians" textField="DisplayName" idField="TechnicianUserID" colorField="ColorValue" allowMultiple="true"></e-schedule-resource>
        </e-schedule-resources>

And the result is this: 

I need to be able to click these and show a new context menu , Is there any way to assign the right click and be able to use your menu ?

Question 2 : 

I need to assig an icon to each event , and each icon a tooltip. How could I do it?


Again I would very much appreciate your help, Greetings !!


BS Balasubramanian Sattanathan Syncfusion Team April 2, 2020 01:39 PM UTC

Hi Juan Manuel Gago, 
 
Thanks for the update. 
 
Q1: 
We have validated your reported scenario at our end and let you know that the Scheduler control has a context menu by default. Please refer the below UG and online demos for further details. 
 
 
Q2: 
We can add the icon in the appointments and also bind the tooltip for the icon itself by making use of eventRendered event and eventTemplate like below highlighted code snippet 
 
<script id="event-template" type="text/x-template"> 
    <div class='template-wrap'> 
        <div class='subject'>${Subject}<span class='e-icons e-dot custom'></span></div> 
        <div class='time'>Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div> 
    </div> 
</script> 
 
function onEventRendered(args) { 
    var tooltipObj = document.querySelector('.e-tooltip').ej2_instances[0]; 
    args.element.querySelector(".custom").addEventListener("mouseover", function (e) { 
        var target = args.element.querySelector('.custom'); 
        // To open the tooltip on mouse hover to icon element 
        if (target) { 
            tooltipObj.open(target); 
        } 
    }); 
    // To close the tooltip on mouse out from icon element 
    args.element.querySelector(".custom").addEventListener("mouseout", function (e) { 
        tooltipObj.close(); 
    }); 
} 
 
 
 
Kindly try the above sample and let us know if you have any concerns. 
 
Regards, 
Balasubramanian S 


JM Juan Manuel Gago replied to Balasubramanian Sattanathan April 2, 2020 08:03 PM UTC

Hi Juan Manuel Gago, 
 
Thanks for the update. 
 
Q1: 
We have validated your reported scenario at our end and let you know that the Scheduler control has a context menu by default. Please refer the below UG and online demos for further details. 
 
 
Q2: 
We can add the icon in the appointments and also bind the tooltip for the icon itself by making use of eventRendered event and eventTemplate like below highlighted code snippet 
 
<script id="event-template" type="text/x-template"> 
    <div class='template-wrap'> 
        <div class='subject'>${Subject}<span class='e-icons e-dot custom'></span></div> 
        <div class='time'>Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div> 
    </div> 
</script> 
 
function onEventRendered(args) { 
    var tooltipObj = document.querySelector('.e-tooltip').ej2_instances[0]; 
    args.element.querySelector(".custom").addEventListener("mouseover", function (e) { 
        var target = args.element.querySelector('.custom'); 
        // To open the tooltip on mouse hover to icon element 
        if (target) { 
            tooltipObj.open(target); 
        } 
    }); 
    // To close the tooltip on mouse out from icon element 
    args.element.querySelector(".custom").addEventListener("mouseout", function (e) { 
        tooltipObj.close(); 
    }); 
} 
 
 
 
Kindly try the above sample and let us know if you have any concerns. 
 
Regards, 
Balasubramanian S 


Thank you again ! 

I have one more question, in relation to question one: 

I add this to my code: 

      <e-schedule-resources>
            <e-schedule-resource dataSource="@ViewBag.Technicians" field="TechnicianUserID" title="Technician" name="Technicians" textField="DisplayName" idField="TechnicianUserID" colorField="ColorValue" allowMultiple="true"></e-schedule-resource>
        </e-schedule-resources>

 -- How can I assign to this e-schedule-resource , the right click ? 

The result is this: 




I hope your answer, thank you very much

BS Balasubramanian Sattanathan Syncfusion Team April 3, 2020 12:29 PM UTC

Hi Juan Manuel Gago, 
 
Thanks for your update. 
 
We have validated your requirement at our end and let you know that, your requirement is possible by making use of the resourceHeaderTemplate property like below code snippet. 
 
<script id="resourceTemplate" type="text/x-template"> 
    <div class='template-wrap' oncontextmenu="resourceHeaderClick(event);return false;"> 
        <div class="resource-details"> 
            <div class="resource-name">${getDoctorName(data)}</div> 
        </div> 
    </div> 
</script> 
 
<script type="text/javascript"> 
    window.getDoctorName = function (value) { 
        return value.resourceData ? value.resourceData[value.resource.textField] : value.resourceName; 
    }; 
 
    function resourceHeaderClick(event) { 
        console.log("resource header is right clicked."); 
        return false; 
    } 
</script> 
 
 
Kindly try the above sample and let us know if you have any concerns 
 
Regards, 
Balasubramanian S 


JM Juan Manuel Gago April 6, 2020 09:09 PM UTC

Thank you again! 
I have a few questions more. 

Q1 : How can I open a context menu for the resources with the right click ? I ́m using a context menu for events too, but I don't understand how to use one for the resources. 
I hope your answer, thank you very much

Q2: In relation to this : 

We can add the icon in the appointments and also bind the tooltip for the icon itself by making use of eventRendered event and eventTemplate like below highlighted code snippet 
 
<script id="event-template" type="text/x-template"> 
    <div class='template-wrap'> 
        <div class='subject'>${Subject}<span class='e-icons e-dot custom'>span>div> 
        <div class='time'>Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}div> 
    div> 
script> 
 
function onEventRendered(args) { 
    var tooltipObj = document.querySelector('.e-tooltip').ej2_instances[0]; 
    args.element.querySelector(".custom").addEventListener("mouseover", function (e) { 
        var target = args.element.querySelector('.custom'); 
        // To open the tooltip on mouse hover to icon element 
        if (target) { 
            tooltipObj.open(target); 
        } 
    }); 
    // To close the tooltip on mouse out from icon element 
    args.element.querySelector(".custom").addEventListener("mouseout", function (e) { 
        tooltipObj.close(); 
    }); 
}
 
 

I try this but I can make it work. When the function   onEventRendered is executed, events in the calendar disappears. 
In addition, the events are loaded dynamically, because I add a range to the scheduler to bring fewer events. How could I do so that every time new events are fetched I can run that function ?

BS Balasubramanian Sattanathan Syncfusion Team April 8, 2020 02:17 PM UTC

Hi Juan Manuel Gago, 

Thanks for the update. 

Q1:  
We can add the context menu for the Resources by making use of the below code snippet. In the below sample, the context menu will be open when we right-click the resource cell. 

<ejs-contextmenu id="contextmenu" cssClass="schedule-context-menu" target=".e-schedule" items="ViewBag.menuItems" beforeOpen="onContextMenuBeforeOpen" select="onMenuItemSelect"> 
</ejs-contextmenu>

... 
... 
... 
 
var selectedTarget; 
function onContextMenuBeforeOpen(args) { 
    var targetElement = args.event.target; 
    if (ej.base.closest(targetElement, '.e-contextmenu')) { 
        return; 
    } 
    selectedTarget = ej.base.closest(targetElement, '.e-resource-cells'); 
    if (ej.base.isNullOrUndefined(selectedTarget)) { 
        args.cancel = true; 
        return; 
    } 
} 
function onMenuItemSelect(args) { 
    alert('Clicked the menu item') 
} 


Q2: 
We let you know that the eventRendered event is triggered for all the appointments while those rendering in the DOM. For example, there is one appointment is already exists, then we add another one means, the eventRendered event should be triggered for both two appointments. We made a video demo for your reference. 


Kindly try the above solution and let us know if you have any concerns. 

Regards, 
Balasubramanian S 


Loader.
Up arrow icon