We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Own customized appointment window in HTMLClient Schedule

Hi! I try to build an application using the Syncfusion Schedule in the Lightswitch HTMLClient. I want to display a calendar with events, where members can assign to a selected event. Therefor, I want to program an own form resp. use an existing HTMLClient screen. Is it possible to use a customized form instead of the default add/edit-appointment form? 

14 Replies

VS Velmurugan S Syncfusion Team December 9, 2015 12:10 PM UTC

Hi Alexandar,

Thanks for using Syncfusion support.

You can use the customized appointment window instead of the default add/edit appointment form in the Schedule control. We have prepared the sample to meet this requirement, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/121386/ze/Application3-679910200

In the above sample we have used the following code example to meet your requirement.

<code>

Custom Window Design:

// In the following code block, we are designing the custom form and append to the Schedule element

var customwindow=$("<div id='customWindow' style='display: none'></div>");

    var form=$("<form id='custom'/>");

    var formtable=$("<table width='100%' cellpadding='5'><tbody><tr style='display: none'><td>Id:</td><td colspan='2'><input id='customId' type='text' name='Id' /></td></tr></tbody></table>");

    --------------------------------

    --------------------------------

    --------------------------------

   btndiv = $("<div><button  type='submit' data-role='none' onclick='cancel()' id='btncancel' style='float:right;margin-right:20px;margin-bottom:10px;'>Cancel</button><button type='submit' data-role='none' onclick='save()' id='btnsubmit' style='float:right;margin-right:20px;margin-bottom:10px;'>Submit</button></div>");

    subtr.appendTo(formtable); dectr.appendTo(formtable); starttr.appendTo(formtable); endtr.appendTo(formtable); alldaytr.appendTo(formtable); recurrencetr.appendTo(formtable);

    formtable.appendTo(form);

    btndiv.appendTo(form);

    form.appendTo(customwindow);

    customwindow.appendTo($(element));
    itemTemplate.appendTo($(element));


AppointmentWindowOpen event trigger:

itemTemplate.ejSchedule({

            width: "100%",

            ------------------

            ------------------

           create: "onCreate",

            appointmentWindowOpen: "onAppointmentWindowOpen", // Here we are declaring the event name
        });


onAppointmentWindowOpen event:

function onAppointmentWindowOpen(args) {

    args.cancel = true;   // Here we are blocking the default window to display the custom window

    $("#StartTime").ejDateTimePicker({ value: args.startTime });       

    $("#EndTime").ejDateTimePicker({ value: args.endTime });  // Here we are assigning the value to the StartTime and EndTime field

    -----------------------

    -----------------------

   if (!ej.isNullOrUndefined(args.appointment)) {  // Here we are assigning the value to the fields to display the appointment details while opening the appointment

        $("#customId").val(args.appointment.Id);

        $("#subject").val(args.appointment.Subject);

------------------------------------

------------------------------------

        $("#customWindow").ejDialog("open");  // Here we are opening the custom window

    }

    else

        $("#customWindow").ejDialog("open");  // Here we are opening the custom window
}
</code>

Saving the appointment:

function save() {

    // Within this block read the values from the custom form

    if ($.trim($("#subject").val()) == "") {

        $("#subject").addClass("error");

        return false;

    }

    ---------------------------

    ---------------------------

    ---------------------------

   $("#customWindow").ejDialog("close");

    var object = $("#Schedule1").data("ejSchedule");  // Here we are creating the object for scheduler

    object.saveAppointment(obj); // Here we are calling the saveAppointment public method by using the created object to save the appointment

    clearFields();
}

Regards,
Velmurugan



AM Alexander M December 28, 2015 10:54 PM UTC

Hi Velmurugan,

thank you very much for your reply. It gave me a deeper insight in the customization possibilities.

Maybe i can clearify my problem a little bit. I don not need a customized form to edit the appointment, but i want to call an add-method for another table and pass the id of the appointment.

In my example I have a schedule with events, where users can subscribe to. Therefore a user should click on an event in the schedule. Now i want to show the user an already existing add-subscription-form. This form needs the id of the event.

I want to use the onAppointmentClick(). Could you please help me and give me an hint how to call my exisitng HTMLCLient form and how to pass the Id of the selected event in the schedule?

Your help would be appreciated.

Regards,

Alex



MP Mahesh Palanisamy Syncfusion Team December 29, 2015 10:38 AM UTC

Hi Alexandar,

Thanks for your update.

We have prepared a sample as per your requirement to call an existing HTMLClient form on clicking an appointment and also depicted the way to pass the id value of the selected event in the scheduler to it, which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/121386/ze/Application3-546736971

In the attached sample we have used the following code example.

<code>

itemTemplate.ejSchedule({

            width: "100%",

            ------------------

            ------------------

            showQuickWindow:false,

            appointmentClick: "onAppointmentClick"

        });

    };

};


//onAppointmentClick event:

function onAppointmentClick(args) {

    var data = args.appointment;

    //Navigate to AddEdit screen

    myapp.showAddEdit(data);
}

// add the createdevent for AddEdit screen to get the appointment collecton.

myapp.AddEdit.created = function (screen) {

    //Here you can get the appointment collection

    var d = screen.__c_Event.Id;

    console.log("Event Id",d);
};

</code>

Please let us know, if you need any further assistance.

Regards, 
Mahesh



SB Stephen Barash February 19, 2017 07:58 PM UTC

Velmurugan, thank you so much for supplying this alternative appointment window.  However, I'm having a problem with the sample (
http://www.syncfusion.com/downloads/support/forum/121386/ze/Application3-679910200) you supplied.

I'm opening the project with Visual Studio 2013 update 5, and linking the Syncfusion 14.4.0.15 extensions "DataVisualation for HTML LightSwitch" and "Web for HTML LightSwitch", and then running the project. I double click on the calendar to get the customized appointment windows and create an appointment. When I click "Submit", I get the following error:


Any idea about what might be wrong?

Thank you so much,

Stephen


MP Mahesh Palanisamy Syncfusion Team February 20, 2017 12:35 PM UTC

Hi Stephen, 
 
We suspect that the reported problem might have occurred due to the CRUD actions were not handled in the previously provided sample. It simply contains the designing process for custom appointment window.  
 
Therefore, we have modified the custom appointment window sample with proper CRUD actions which can be referred in the below code (need to define the proper schedule data source) - 
 
<Code> 
myapp.Schedule.Events_render = function (element, contentItem) { 
 
    //Container for ejScheduler widget 
    var itemTemplate = $("<div id='Schedule1'></div>"); 
    itemTemplate.appendTo($(element)); 
 
    contentItem.value.oncollectionchange = function () { 
 
        var dManager = ej.DataManager({ 
            // Get the required appointments from Web API  
            url: "../api/Schedule/GetData", 
            // Here you have to pass the post action name for the crud operation 
            crudUrl: "../api/Schedule/Crud", 
            offline: false 
        }); 
        dManager.adaptor = new ej.UrlAdaptor(); 
 
        // defining Schedule control 
        itemTemplate.ejSchedule({ 
            width: "100%", 
            height: "525px", 
            currentDate: "5/5/2014", 
            appointmentSettings: { 
                dataSource: dManager, 
                id: "Id", 
                subject: "Subject", 
                startTime: "StartTime", 
                endTime: "EndTime", 
                allDay: "AllDay", 
                recurrence: "Recurrence", 
                recurrenceRule: "RecurrenceRule", 
            } 
        }); 
    } 
}; 
</Code> 
 
We have modified the sample with custom appointment window handling proper CRUD operation, which can be downloaded from below location, 
 
Note : we have attached the database script in the above sample link to run it properly. 
 
Also, refer the below link to Perform CRUD operations, 
 
Kindly check the above sample and let us know, if you need any further assistance on this. 
 
Regards, 
Mahesh 



SB Stephen Barash February 20, 2017 06:31 PM UTC

Mahesh,

First, let me say that you're level of support is truly amazing. Thank you so much!

I was mainly playing with your custom appointment form because I thought it may reveal a way to perform CRUD operations via ContentItem data binding. My own efforts with Schedule and ContentItem data binding have failed. I can read schedule data from my database by setting the appointment settings datasource to ej.datamanager using your examples. And I can write schedule data to my database if datasource is set to contentItem.value.data and I get the appointment values from args and use them to set ContentItem. However, combining both by setting datasource to ej.datamanager and writing args values to ContentItem causes hangs somewhere in the externally referenced java script upon submit.

Your documentation states that using webapi is the best way to perform CRUD operations, so I've been trying to work with that as well. However, that isn't working for me either. First of all, while I've gotten it to mostly work, I'm strong with VB.net but I'm not familiar with C#. Thus, I'm not comfortable having to use C# for the other parts of my project. Also with your webapi sample the StartTime and EndTime values are somehow automatically pushed forward by 8 hours. For example if I create an appointment using Quick, or Default windows from 1:00 PM to 2:00 PM, the data is put into the database and displayed on the schedule as 9:00 PM to 10 PM. While debugging, I can see that the starttime and endtime is correct in the args, but they are somehow changed before being received by the server code. I've played extensively with Template time settings, and may different versions of the referenced scripts in default.htm without success.

I was thinking I'd just get around this issue by subtracting 8 hours from the time inputs, but there doesn't seem to be a way to hook into that data before the CRUD operation is called on the client. I'd do it server side, but...C#. So, I spent the day yesterday trying to convert the server side C# WebAPI code to vb.net, and think I am getting close. I definitely need to learn C#, but don't have time to within the boundaries of this project.

I know I've written a novel here, and really appreciate your patience. I certainly wouldn't expect you to address all of my issues addressed here. But if you would help with any, I'd prefer a just a hint for method to perform full CRUD operations using ContentItem.

Thanks again,

Stephen


KK Karthigeyan Krishnamurthi Syncfusion Team February 21, 2017 11:56 AM UTC

Hi Stephen, 
 
Thanks for your update. 
 
We suspect that timezone difference is added with an appointment duration and therefore, appointments are not displayed as per database timings. We request you to use applyTimeOffset property to render an appointment as same as the databse timings. Kindly refer the below link to know more about the property. 

Regards, 
Karthigeyan 



SB Stephen Barash February 21, 2017 10:04 PM UTC

Hello Karthigeyan ,

Changing the applyTimeOffset from its default of 'true' to 'false' does not resolve the problem. The system time and time zone on both my development workstation and my SQL server are correct. I'm using the CRUD sample supplied to this forum in a previous post, and I used its .sql script to create the table I'm using in SQL server.

Still, I'm uploading the project in case you'd like to examine it. Also, included in the file is the output of the Visual Studio debug output window.

Thank you,
Stephen

Attachment: CRUD_Sample_747bdd2b.zip


KK Karthigeyan Krishnamurthi Syncfusion Team February 22, 2017 12:56 PM UTC

Hi Stephen,  
  
Thanks for your update.  

We have checked the provided sample and found that StartTimeZone and EndTimeZone fields are used in data base but not included timeZone field at sample level. To render an appointment as same as the time given in data base any one of the below suggested ways can be used. 
 
1.       Maintaining same values for timeZone (sample side field), StartTimeZone and EndTimeZone (db fields). 
2.       Defining applyTimeOffset property within appointmentSettings       

Note: It is not necessary to use applyTimeOffset and Start/EndTimeZone properties at same time.  
 
We have prepared the below samples for your reference about these properties.       
ApplyTimeOffset: http://jsplayground.syncfusion.com/d1a3wsof      
Start/EndTimeZone: http://jsplayground.syncfusion.com/2n2lzkb0      

Regards, 
Karthigeyan 



SB Stephen Barash February 23, 2017 12:38 AM UTC

Hello Karthigeyan,

I tried the settings you provided and played with them extensively, but they did not help. (I'd already tried applyTimeOffset as you'd suggested in your prior post).

The data is actually stored correctly in the database, I just hadn't anticipated the time's changing to UTC 00:00 when stored. The issue is that the calendar is not selecting the correct time slots when it reads the starttime and endtime data from the database.

I went ahead and updated the scripts and css to the latest versions possible - and now when I create an appointment, the time block in the calendar is displayed 7 hours earlier than it should. For example if I create an appointment for 10:00 AM to 10:30 AM, then the 3:00 AM to 3:30 AM time block is filled in the calendar. In the database, the starttime & endtime for this entry is 18:00 to 18:30. My local time is UTC -08:00, so this is correct.

Here are the relevant entries of my default.htm:
    <link rel="stylesheet" type="text/css" rel='nofollow' href="Content/light-theme-2.5.4.css" />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="Content/msls-light-2.5.4.css" />

    <link rel="stylesheet" type="text/css" rel='nofollow' href="Content/jquery.mobile.structure-1.3.2.min.css" />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="Content/msls-2.5.4.min.css" />
   
    <link rel="stylesheet" type="text/css" rel='nofollow' href="Content/ej/default-theme/ej.web.all.min.css" />
    <link rel="stylesheet" type="text/css" rel='nofollow' href="http://cdn.syncfusion.com/15.1.0.33/js/web/responsive-css/ej.responsive.css" />
    <!-- Default font, header, and icon styles can be overriden in user-customization.css -->
    <link rel="stylesheet" type="text/css" rel='nofollow' href="Content/user-customization.css"/>

    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
    <script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="Scripts/datajs-1.1.3.min.js"></script>
    <script type="text/javascript" src="Scripts/Generated/resources.js"></script>
    <script type="text/javascript" src="Scripts/msls-2.5.4.min.js"></script>

    <script type="text/javascript" src="Scripts/jsrender.min.js"></script>
    <script type="text/javascript" src="Scripts/ej/ej.web.all.min.js"></script>    
    <script type="text/javascript" src="Scripts/Generated/generatedAssets.js"></script>

AlAll of the locally referenced Syncfusion scripts & CSS are the 15.1.0.33 version. Project is enclosed in a zip file. If you run it, you should get the same results.
Thanks for your patience,
Stephen

T





Attachment: CRUDSample_6d9e1f61.7z


KK Karthigeyan Krishnamurthi Syncfusion Team February 24, 2017 12:55 PM UTC

 
Thanks for sharing the sample with us. 
 
We have checked the reported scenario “Appointments are not saving in correct time” and able to reproduce the reported issue. We have modified the sample to overcome the issue and for the same we have prepared the sample and video demo which can be download from the below location.  
 
Kindly refer the below code example used in the sample. 
<Code> 
public List<FormModel> GetData() 
        { 
            using (ServerApplicationContext context = ServerApplicationContext.CreateContext()) 
            { 
                var data = context.DataWorkspace.scheduleLSData.ScheduleEvents.Cast<ScheduleEvent>().Select(app => new { app.Id, app.Subject, app.StartTime, app.EndTime, app.AllDay, app.Recurrence, app.RecurrenceRule}).ToList(); 
                return data.Select(app => new FormModel() 
                { 
                    Id = app.Id, 
                    Subject = app.Subject, 
                    StartTime = Convert.ToDateTime(app.StartTime).ToUniversalTime(), 
                    EndTime = Convert.ToDateTime(app.EndTime).ToUniversalTime(), 
                    AllDay = app.AllDay, 
                    Recurrence = app.Recurrence, 
                    RecurrenceRule = app.RecurrenceRule 
 
                }).ToList(); 
            } 
        } 
if (param.action == "insert" || (param.action == "batch" && param.added.Count > 0)) 
                // this block of code will execute while inserting the appointments 
                { 
                    var value = param.action == "insert" ? param.value : param.added.ToList()[0]; 
                    DateTime startTime = Convert.ToDateTime(value.StartTime).ToLocalTime(); 
                    DateTime endTime = Convert.ToDateTime(value.EndTime).ToLocalTime(); 
                    ScheduleEvent app = context.DataWorkspace.scheduleLSData.ScheduleEvents.AddNew(); 
                    { 
                        app.StartTime = startTime; 
                        app.EndTime = endTime; 
                        app.Subject = value.Subject; 
                        app.Recurrence = value.Recurrence; 
                        app.AllDay = value.AllDay; 
                        app.RecurrenceRule = value.RecurrenceRule; 
                    }; 
                    context.DataWorkspace.scheduleLSData.SaveChanges(); 
                } 
</Code> 
 
Note: In version 15.1.0.33 version after adding new appointment (with CRUD operation enabled), appointments will not render in Scheduler. To overcome that issue kindly use the below code example in create event which was included in the above sample. 
 
<Code> 
function onCreate(args) { // this function will be called during the initial load of the Schedule  
    Date.prototype.parseISO8601 = function (date) { 
        return (typeof (date) === 'string') ? date.indexOf("Date") != -1 ? new Date(parseInt(date.match(/\d+/).toString())) : date.indexOf("T") != -1 ? new Date(date) : new Date(date.replace(/-/g, "/")) : new Date(date); 
    }; 
</Code> 
 
Regards, 
Karthigeyan 



SB Stephen Barash February 24, 2017 07:07 PM UTC

Fantastic! I thought I was going crazy...

Thank you so much,

Stephen


SB Stephen Barash February 25, 2017 12:43 AM UTC

Just in case you ever need a vb.net version of the WebAPI stuff of your sample, I was finally able to translate it successfully.

Enclosed. Thanks again,

Stephen

Attachment: Events_78387da9.7z


KK Karthigeyan Krishnamurthi Syncfusion Team February 27, 2017 05:54 AM UTC

 
We are happy to hear that your issue has been resolved. 
 
Please let us know if you need further assistance. 
 
Regards, 
Karthigeyan 


Loader.
Up arrow icon