1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Schedule Events

Schedule Events

Hi!

Where can I find the events for the JS2 Schedule?

Thanks

11 Replies
VS Velmurugan S Syncfusion Team April 6, 2018 04:03 PM UTC

Hi Sarosh, 

Thanks for Contacting Syncfusion support. 

We request you to look into our below sample browser links to know more about the JS2 ASP.NET Core Client Side events available in Schedule control and how to use it. 

All the other available event names of Schedule can be viewable from the below API link which is applicable to be used on ASP.NET Core platform too. 
To know more on how to get start with general JS2 ASP.NET Core application and use JS2 components within it, refer here - https://ej2.syncfusion.com/16.1.32/aspnet/documentation/getting-started/asp-core.html?syntax=tag 

  1. In case, if you were querying about how to bind appointments to the Schedule, then create a class with your required fields with mandatory Id, start and end time. An example class used in the sample https://aspdotnetcore.syncfusion.com/Schedule/Timezone#/material is given below,

public class FifaEventsData 
    { 
        public int Id { get; set; } 
        public string Subject { get; set; } 
        public DateTime StartTime { get; set; } 
        public DateTime EndTime { get; set; } 
        public bool IsAllDay { get; set; } 
        public string Description { get; set; } 
        public string City { get; set; } 
        public string StartTimezone { get; set; } 
        public string EndTimezone { get; set; } 
        public string CategoryColor { get; set; } 
    } 

  1. Define a function to form the appointment data collection as per the above defined model.
 
public class ScheduleData 
{ 
        public List<FifaEventsData> GetFifaEventsData() 
        { 
            List<FifaEventsData> fifaEventsData = new List<FifaEventsData>(); 
            fifaEventsData.Add(new FifaEventsData 
            { 
                Id = 1, 
                Subject = "RUSSIA vs SAUDI ARABIA", 
                Description = "Group A", 
                StartTime = new DateTime(2018, 6, 14, 15, 0, 0), 
                EndTime = new DateTime(2018, 6, 14, 17, 0, 0), 
                StartTimezone = "Europe/Moscow", 
                EndTimezone = "Europe/Moscow", 
                City = "Moscow", 
                CategoryColor= "#1aaa55" 
            }); 
            fifaEventsData.Add(new FifaEventsData 
            { 
                Id = 2, 
                Subject = "EGYPT vs URUGUAY", 
                Description = "Group A", 
                StartTime = new DateTime(2018, 6, 15, 12, 0, 0), 
                EndTime = new DateTime(2018, 6, 15, 14, 0, 0), 
                StartTimezone = "Asia/Yekaterinburg", 
                EndTimezone = "Asia/Yekaterinburg", 
                City = "Ekaterinburg", 
                CategoryColor= "#1aaa55" 
            }); 
            fifaEventsData.Add(new FifaEventsData 
            { 
                Id = 3, 
                Subject = "MOROCCO vs IR IRAN", 
                Description = "Group B", 
                StartTime = new DateTime(2018, 6, 15, 15, 0, 0), 
                EndTime = new DateTime(2018, 6, 15, 17, 0, 0), 
                StartTimezone = "Europe/Moscow", 
                EndTimezone = "Europe/Moscow", 
                City = "Saint Petersburg", 
                CategoryColor= "#357cd2" 
            }); 
            return fifaEventsData; 
        } 
} 
  1. In the controller page, define the action from where the above event data can be fetched and returned to view page.

       public IActionResult Timezone() 
        { 
            ViewBag.appointments = new ScheduleData().GetFifaEventsData(); 
            return View(); 
        } 

  1. In your index.cshtml page, define the Schedule code and assign the above returned ViewBag.appointments variable to the Schedule dataSource as depicted in the below code example,

            <ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2018, 6, 20)" Timezone="UTC" > 
                <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings> 
            </ejs-schedule> 

Note: In the above defined model data, the fields (used in the class FifaEventsData) are defined with the default field names of Schedule appointments same as used within our source and if you need to bind those fields with different names from database, then it needs to be mapped to the default available fields of Schedule which is listed below, 
·         description – Simple description of the event. 
·         endTime - Denotes the end time of the event. 
·         id - Denotes the Unique ID of the event. 
·         isAllDay - Denotes either the event is an all-day event or not. 
·         location - Denotes the location of the event. 
·         recurrenceException - Denotes the recurrence exception to be considered for an event. 
·         recurrenceID - Denotes the parent ID of the recurring events. 
·         recurrenceRule - Rule value that denotes the repetitive patterns of recurrence. 
·         startTime - Denotes the start time of an event. 
·         subject - Denotes the subject of the event. 
·         startTimezone - Denotes the timezone for the start time of an event. 
·         endTimezone - Denotes the timezone for the end time of an event. 
Refer below on how to map different field names from classes or database to the default schedule appointment fields. The highlighted ones are the mandatory fields of events. 
<e-schedule-eventsettings dataSource="@ViewBag.appointments" id="eventID" subject="eventSubject" description="eventDescription" startTime="eventStart" endTime="eventEnd"> 
</e-schedule-eventsettings>  
Also, the complete UG documentation for JS2 Schedule control is under drafting and will get refresh in our online location by the mid of this month. 

Please let us know, if you need any further assistance on this and kindly revert back to us with further details, if we have misunderstood your query. 

Regards, 
Velmurugan

SW Sarosh Wadia April 15, 2018 05:37 PM UTC

Hi!

Yes thanks, that is kind of what I was looking for!

I have a few more questions though:

1] How can I enable Drag/Drop in the Schedule Control?
2] How can I enable a right click Context Menu in the Schedule Control?
3] How can I add Resources using an action method in the Controller?
4] How can I Load/Edit/Delete/Save Data in the Controller using the UrlAdaptor using Entity Framework?
5] How can I Load data using the (navigating="onnavigating") client side navigating event. I want that event to call an action method in the Controller and to return data for only that Date that the use selects on the client side?
6] How can Customize the Agenda View (Template)?
7] How can I Add Custom Fields at Design Time rather than at Runtime?
8] If the new tag helper does not support all the above can I use the " @(Html.EJ().Schedule("Schedule1")" syntax?

I could do all the above using the old Schedule Control.

Here is some sample code that I would like to convert into the new tag helper format:

<div id="target" class="cols-sample-area">
    @Html.EJ().WaitingPopup("target").ShowImage(true).ShowOnInit(true).Text("Loading Appointments, Please Wait...")
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(m => m.CurrentStatus)
    @Html.HiddenFor(m => m.CurrentCustomerID)
    @Html.HiddenFor(m => m.CurrentTimeZone)
    @(Html.EJ().Schedule("Schedule1")
        .Width("100%")
        .Height("725px")
        .CurrentView(Syncfusion.JavaScript.CurrentView.Day)
        .EnableLoadOnDemand(true)
        .ShowAppointmentNavigator(false)
        .CurrentDate((DateTime)Model.CurrentDate)
        .WorkHours(hrs => hrs.Highlight(true).Start(8).End(18))
        .TimeScale(ts => ts.Enable(true).majorSlot(60).minorSlotCount(2))
        .TimeZone(Model.CurrentTimeZone)
        .ShowDeleteConfirmationDialog()
        .ShowAppointmentNavigator(true)
        .ShowHeaderBar(true)
        .ShowCurrentTimeIndicator(true)
        .ShowLocationField(false)
        .ShowTimeZoneFields(false)
        .ShowQuickWindow(true)
        .ShowAllDayRow(false)
        .IsDST(false)
        .AllowDragAndDrop(true)
        .EnableAppointmentResize(false)
        //.TooltipSettings(set => set.Enable(true).TemplateId("#tooltipTemplate"))
        .TooltipSettings(set => set.Enable(false))
        .EnableAppointmentNavigation(false)
        .ContextMenuSettings(cxt => cxt.Enable(true).MenuItems(item => item.Appointment(Model.AppContextMenu)))
        .ScheduleClientSideEvents(evt => evt.MenuItemClick("onMenuItemClick").Create("onCreate").AppointmentWindowOpen("onAppointmentWindowOpen").DragStop("dragStop").Navigation("onNavigation").CellClick("cellClick").ActionBegin("onBegin").ActionComplete("OnComplete"))
        .Group(gr => { gr.Resources(Model.GroupCol); })
        .Resources(res =>
        {
            res.Field("StaffID").Title("Staff").Name("Owners").AllowMultiple(false).ResourceSettings(flds => flds.Datasource(ds => ds.URL("/Appointment/GetResData").Adaptor("UrlAdaptor")).Text("Text").Id("ID").Color("Color")).Add();
        })
        .CategorizeSettings(cat => cat.Enable(true).Datasource(Model.CategorizeSettings).Id("ID").Text("Text").Color("Color").FontColor("ForeColor").Title("Status"))
        .PrioritySettings(pri => pri.Enable(true))
        .AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Appointment/GetData").CrudURL("/Appointment/Batch").Adaptor("UrlAdaptor"))
                .ApplyTimeOffset(Model.ApplyTimeOffset)
                .Id("Id")
                .Subject("Subject")
                .StartTime("StartTime")
                .EndTime("EndTime")
                .StartTimeZone("StartTimeZone")
                .EndTimeZone("EndTimeZone")
                .Description("Description")
                .Location("Location")
                .AllDay("AllDay")
                .Priority("Priority")
                .Categorize("Categorize")
                .Recurrence("Recurrence")
                .RecurrenceRule("RecurrenceRule")
                .RecurrenceId("RecurrenceId")
                .RecurrenceExDate("RecurrenceExDate")
                .ResourceFields("StaffID"))
    )
</div>


Thanks


VS Velmurugan S Syncfusion Team April 16, 2018 12:44 PM UTC

Hi Sarosh, 

Thanks for your update. 

Please find the following responses for your queries. 

S. NO 
Query 
Answer 
1 
How can I enable Drag/Drop in the Schedule Control? 
Currently, “Drag and drop” and “Context menu” features are not available in JS2 Schedule. 

We have considered to include the “Drag and Drop” feature for the Volume-3, 2018 main release whereas the context menu feature will be available in any one of the upcoming releases. 
2 
How can I enable a right click Context Menu in the Schedule Control? 
3 
How can I add Resources using an action method in the Controller? 
The complete multiple resources support in vertical orientation is currently being under implementation and will be available in our upcoming Volume-2, 2018 main release. 
4 
How can I Load/Edit/Delete/Save Data in the Controller using the UrlAdaptor using Entity Framework? 
Loading and performing CRUD action using UrlAdaptor with Entity framework is possible with JS2 Schedule.  
5 
How can I Load data using the (navigating="onnavigating") client side navigating event. I want that event to call an action method in the Controller and to return data for only that Date that the use selects on the client side? 
By default JS2 Schedule control will be displaying with the filtered data based on the current date range rendered on it (LoadOnDemand concept). Therefore, while navigating the dates - controller method will be triggered automatically and the filtered data based on the current date will be bound to the Schedule control. 
6 
How can Customize the Agenda View (Template)? 
Agenda view can be customized by using the built-in event template and date-header template support in JS2 Schedule. 
7 
How can I Add Custom Fields at Design Time rather than at Runtime? 
You can add the custom field to the event window additionally or else design the entire custom window. Please refer to the following sample link to know about this feature. 

Custom fields -  

8 
If the new tag helper does not support all the above can I use the " @(Html.EJ().Schedule("Schedule1")" syntax? 
Currently, we do not have built-in support for the above highlighted features (1,2,3) such as drag and drop, context menu and multiple resources in JS2 Schedule control which will be available in the already mentioned timelines of Volume-2 and Volume-3, 2018 releases. 

The other requested features such as loading data on demand and performing CRUD actions with entity framework (with UrlAdaptor), adding custom fields, agenda view customizations are already available in JS2 schedule. Could you please confirm whether we can prepare and share you the sample with this available features in JS2 Schedule?  

We also kindly request you to continue to use our JS1 Schedule until the above mentioned unavailable features gets implemented. 

Regards, 
Velmurugan 


SW Sarosh Wadia April 16, 2018 02:21 PM UTC

Hi!

What is the approximate date for Volume-2, 2018 main release.?

>>Could you please confirm whether we can prepare and share you the sample with this available features in JS2 Schedule?

Sure go ahead no problem.

Since we need Multiple Resources/Context Menu/DragDrop:

1] How can I use JS1 Schedule Control in my .ASP.NET Core 2.0 Project alongside with other JS2 controls?
2] Are there any issues combining JS1 and JS2 Controls in the same project?

Thanks

VS Velmurugan S Syncfusion Team April 18, 2018 09:17 AM UTC

Hi Sarosh, 
 
Thanks for your update. 
 
Please find the following responses for your queries. 
 
Query #1: What is the approximate date for Volume-2, 2018 main release.? 
The Volume 2, 2018 release is tentatively scheduled to be available by May 21, 2018. 
 
Query #2: JS2 Schedule control sample with available features. 
 
We have prepared the JS2 Schedule control sample with the already mentioned available features, which can be downloaded from the following location. 
 
 
Query #3: How can I use JS1 Schedule Control in my .ASP.NET Core 2.0 Project alongside with other JS2 controls? 
Query #4: Are there any issues combining JS1 and JS2 Controls in the same project? 

It is possible to use JS1 Schedule control along with other JS2 controls as we have already provided the compatibility support for this.  We have also prepared a simple sample with JS1 Schedule using it along with JS2 DatePicker control on the same page, which can be downloaded from the following location. 
 

Also, we request you to look into our below UG link to know about the compatibility support. 

Regards, 
Velmurugan 


SW Sarosh Wadia April 20, 2018 01:36 PM UTC

Hi!

I tried your example and it's working as expected but I now want to show the ejs-grid on the same page but it does not render.

In the HomeController Index()
I added:
 ViewBag.appointmentData = _context.ScheduleEvents.ToList();

In the Index.chtml I added :

<div>
            <ejs-grid id="Grid" [email protected] allowPaging="true">
                <e-grid-columns>
                    <e-grid-column field="Subject" headerText="Subject"></e-grid-column>
                    <e-grid-column field="Description" headerText="Description"></e-grid-column>
                </e-grid-columns>
            </ejs-grid>
        </div>

but the grid won't render



VS Velmurugan S Syncfusion Team April 23, 2018 12:47 PM UTC

Hi Sarosh, 
 
We are glad that our given sample helped to meet your expectation. Please find the following response for your query related to ejs-grid. 
 
Yes, we are able to reproduce the issue at our end and reason is EJ1 datamanager overrides the EJ2 datamanager script. This is the reason script error thrown while bound data source to the Grid. So, we suggest you to the extend the EJ1 data object like as follows.  
[_Layout.html page]  
  
<script>  
        // Extend ej namespace with Syncfusion  
        var  dataCopy  =  Object.assign({},  ej.data);  
        $.extend(ej,  Syncfusion);  
        $.extend(ej.data,  dataCopy);  
    </script>  
    <ej-script-manager></ej-script-manager>  
    <ejs-scripts></ejs-scripts>  
  
. .  .  
 
We have also prepared a sample for your convenience which can be download from following link,  
 
Please let us know if you have any further assistance on this.  
 
Regards, 
Velmurugan 


SW Sarosh Wadia April 23, 2018 02:39 PM UTC

Hi!

Now that I have combined EJ1 and EJ2 controls in my project I have noticed something strange!

I am using the EJ1 Schedule Control and the Hour lines are messed up, e.g. appoints starting 12:00 show up at the 1:00 pm hour line and the lines are not lining up at the hour and 30 minute mark. 

Please take a look at the Snapshot below. The appoint labels show the start and end times of the appointments but you can see that they don't align properly.

Thanks



VS Velmurugan S Syncfusion Team April 25, 2018 03:41 AM UTC

Hi Sarosh, 
  
We have tried modifying the previously given sample by adding the resources and categorize as mentioned in your shared code (shared on 15th April,2018) and checked the reported scenario, but the schedule appointments are displaying properly with proper timeline difference. Therefore, we suspect that the reason for the issue might be the custom theme (based on your latest schedule screenshot) or custom CSS used in your project .  
 
Please find the working sample for your reference from the following location.  
 
Kindly try with the above sample, and in case if you still face the same misalignment problem at your end, kindly revert back to us with some more details about your control rendering code page and custom style reference details and If possible, try to reproduce the issue in the above sample. The information that you share will be helpful for us to proceed further on this. 
   
Regards,  
Velmurugan 


SW Sarosh Wadia April 25, 2018 01:26 PM UTC

Hi!

Your code example works correctly!

After some investigating I found out that it was my custom style css was causing the problem which I have fixed now.

I have one more question: 

In the (JS1) Schedule Control: I have 
1] enable-load-on-demand="true" 
2] <e-datamanager id="myData" url="/Appointment/GetData" crud-url="/Appointment/Batch" adaptor="UrlAdaptor"></e-datamanager>

When I Add a new Appointment or Edit an Appointment it first triggers the "Batch" Method (public List<DefaultSchedule> Batch([FromBody] EditParams param)) in the Controller and then triggers the "GetData" Method (public BatchDataResult GetData([FromBody] MyPostModel post)) and everything is rendered in the Control correctly but when I Drag and Drop an Appointment from one Time slot to another, it only triggers the "Batch" Method and does not trigger the "GetData" Method so the Control does not reflect the change till I Refresh the page or go to another page and come back.

How can I fix this issue?

Thanks

VS Velmurugan S Syncfusion Team May 1, 2018 04:34 PM UTC

Hi Sarosh,  
We suspect that the reason of the mentioned behavior might be due to the post action got failed on drag action which might results in such behavior. So, we suggest you to check, if any error getting thrown at the console and also kindly share those details with us.. 
Please check on the console information and revert back to us with some more details like request details in network tab ( check in browser window) and If possible, try to reproduce the issue in the above sample. The information that you share will be helpful for us to proceed further on this. 
Regards, 
Velmurugan 


Loader.
Up arrow icon