I want set Do not want same day booking.

[MJ]

I test use Schedule Room Meeting Booking

but user can book the same date and time

1. I can set option user do not want same day booking.

Capture_Schedule_01.png

2. I can hide time zone

Capture_Schedule_02.png

3. I can change eng lang. text to Thailand lang.

Capture_Schedule_03.png

Please advise.

Thank you very much

Attachment: Capture_Schedule_80749dae.zip

[Nevitha Ravi]

Hi Miclejee, 

Thank you for contacting Syncfusion Support. 

Please find the following responses for your queries. Also, kindly note that you have selected the ASP.NET MVC – EJ2 platform in the support ticket, but your query and shared screenshot seems to be pointing to the ASP.NET MVC EJ1 platform. Therefore, we are proceeding to provide response using JS1 ASP.NET MVC Scheduler. 

Q1: We have prepared sample to prevent overlapping of appointments in the same time slot interval which can be downloaded from the below link. 

http://www.syncfusion.com/downloads/support/forum/141086/ze/Sample869396812  

  

@(Html.EJ().Schedule("Schedule1") 

            .Width("100%").Height("525px").CurrentDate(new DateTime(2016, 11, 18)) 

            .Locale("th-TH").ShowTimeZoneFields(false) 

            .ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom") 

                .BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom")) 

            .Resources(res => 

            { 

                res.Field("OwnerId").Title("Owner").Name("Owners").AllowMultiple(true) 

                .ResourceSettings(flds => flds.Datasource((System.Collections.IEnumerable)ViewBag.Owners).Text("text").Id("id").GroupId("groupId").Color("color")).Add(); 

            }) 

            .Group(gr => 

            { 

                gr.Resources(ViewBag.Resources); 

            }) 

                .AppointmentSettings(fields => fields.Datasource(ViewBag.dataSource) 

                .ApplyTimeOffset(false) 

                .Id("Id") 

                .Subject("Subject") 

                .StartTime("StartTime") 

                .EndTime("EndTime") 

                .Description("Description") 

                .AllDay("AllDay") 

                .Recurrence("Recurrence") 

                .RecurrenceRule("RecurrenceRule") 

                .ResourceFields("OwnerId")) 

) 

   function renderingCustom(args) { 

        var schObj = $("#Schedule1").ejSchedule('instance'); 

        if (ej.isNullOrUndefined(args.appointment[0])) 

            app = args.appointment; 

        else 

            app = args.appointment[0]; 

        if (args.type == "beforeAppointmentChange") 

            app = args.appointment.changed[0]; 

        var count = overlap(app, args.type); 

        if (args.type != "resizeStop" && args.type != "dragStop" && count > 0) { 

            args.cancel = (count > 0); 

        } else if (count > 1) { 

            args.cancel = (count > 1); 

        } 

    } 

    function overlap(app, type) { 

        var obj = $("#Schedule1").ejSchedule('instance'); 

        var startDate = app[obj._appointmentSettings["startTime"]]; 

        var endDate = app[obj._appointmentSettings["endTime"]]; 

        var resourceId = app["OwnerId"]; 

        var predicate = ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.greaterThanOrEqual, startDate). 

            and(ej.Predicate(obj._appointmentSettings["endTime"], ej.FilterOperators.greaterThanOrEqual, startDate)). 

            and(ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.lessThan, endDate)). 

            or(ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, startDate). 

                and(ej.Predicate(obj._appointmentSettings["endTime"], ej.FilterOperators.greaterThan, startDate))); 

        var filterApp = new ej.DataManager(obj._processed).executeLocal(new ej.Query().where(predicate)); 

        if (obj._tempResource.length > 0) { 

            var resPredicate = ej.Predicate(obj._appointmentSettings["resourceFields"], ej.FilterOperators.contains, resourceId); 

            var filterResApp = new ej.DataManager(filterApp).executeLocal(new ej.Query().where(resPredicate)); 

        } 

        var overlapCount = 0; 

        if (obj._tempResource.length > 0) { 

            overlapCount = (type == "beforeAppointmentChange" && filterResApp.length == 1 && filterResApp[0].Id == app.Id) ? 0 : filterResApp.length; 

        } 

        else { 

            overlapCount = filterApp.length 

        } 

        return overlapCount; 

    } 

Q2: We can hide time zone fields in appointment window by setting false to the ShowTimeZoneFields API. 

Q3: To change the localization, please use Locale property with appropriate culture values. We have used Thailand culture in the above sample. 

Regards, 

Nevitha. 

[MJ]

Thank you for your advice.

[Karthigeyan Krishnamurthi]

Hi Miclejee, 

 

Thanks for your update. 

 

Regards, 

Karthigeyan 

 

[MJ]

Hi Miclejee, 

 

Thanks for your update. 

 

Regards, 

Karthigeyan 

 

Thank you for your advice.

We have more questions.

#1

I Setting for Pic Capture_Schedule_No_02_01 - Capture_Schedule_No_02_04

Appointment will be delayed for 7 hours, eg 9.00 will be displayed as 16.00.

#2

Capture_Schedule_No_02_05 - Capture_Schedule_No_02_06

We do not want to display image 5, but when click to display image 6.

#3

Capture_Schedule_No_02_07

In Figure 7, we can add the URL click http: // .. / id = 1.

#4

Capture_Schedule_No_02_08

Figure 8 We want to send a notification to the user when a meeting room is booked. But to send smtp mail as a Async we will do

public JsonResult Batch (EditParams Param)
         {

....

Is the Async?

 // //string Status = emailHelper.SendMailAsync();
               // //if (string.IsNullOrEmpty(Status))
               // //{
               // //    ViewBag.Error = "Send Mail is OK";
               // //}
               // //else
               // //{
               // //    ViewBag.Error = "Send Mail is Error !!!;
               // //}

Please advise.

Thank you very much

Attachment: Capture_Schedule_No_02_aa35ed57.zip

[Karthigeyan Krishnamurthi]

Hi Miclejee,  

  

Thanks for your update. 

 

Please find the below sample and responses for your queries. 

http://www.syncfusion.com/downloads/support/forum/141086/ze/Sample-727039998 

 

1. Kindly use ApplyTimeOffset API as shown below to overcome the issue.

 

.AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor("UrlAdaptor")) 

   .ApplyTimeOffset(false) 

   .Id("Id") 

   .Subject("Subject") 

   .StartTime("StartTime") 

   .EndTime("EndTime") 

   .Description("Description") 

   .AllDay("AllDay") 

   .Recurrence("Recurrence") 

   .RecurrenceRule("RecurrenceRule") 

   .ResourceFields("OwnerId")) 

 

2. We suspect your requirement is to disable the quick window and kindly refer the below code example.

 

// To disable quick window on both cell and appointment click 

.ShowQuickWindow(true) 

 

// To disable quick window only on appointment click 

.AppointmentClick("onClick") // client event 

 

function onClick(args) { 

    args.cancel = true; 

} 

 

3. We can customize the edit window using AppointmentWindowOpen event.

 

.AppointmentWindowOpen("onAppointmentOpen") 

 

function onAppointmentOpen(args) { 

    if ($("#customfields").length == 0 && !ej.isNullOrUndefined(args.appointment)) { 

        var customDesign = "<tr id='customfields'><td><input type='button' id='URL' name='URL' value='URL' onclick='ok()' /></td></tr>"; 

        $("#Schedule1_AddEditForm").after(customDesign); 

        $("#URL").ejButton({ showRoundedCorner: true, width: "100px", size: "medium" }); 

    } else { 

        this._appointmentAddWindow.find("#URL").css("display", "none"); 

    } 

} 

function ok() { 

    //var obj = $("#Schedule1").data("ejSchedule"); 

    alert('URL button clicked') 

} 

 

4. Notification mail can be sent after updating the database and before returning the collection as shown below.

 

public JsonResult Batch(EditParams param) 

        { 

            if (param.action == "insert" || (param.action == "batch" && param.added != null))          // this block of code will execute while inserting the appointments 

            { 

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

                db.Appointments.InsertOnSubmit(appoint); 

                db.SubmitChanges(); 

            } 

            if (param.action == "remove" || param.deleted != null)                                        // this block of code will execute while removing the appointment 

            { 

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

                db.SubmitChanges(); 

            } 

            if ((param.action == "batch" && param.changed != null) || param.action == "update")   // this block of code will execute while updating the appointment 

            { 

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

                db.SubmitChanges(); 

            } 

            // here user can be notified 

            IEnumerable data = new DataClasses1DataContext().Appointments.Take(500);                        return Json(data, JsonRequestBehavior.AllowGet); 

        } 

 

Regards, 

Karthigeyan 

[MJ]

Thank you for your advice.

THX. Very ...

I use Syncfusion.EJ.Mvc, Version=15.4500.0.17

#1

picture Capture_Schedule_No_03_03.jpg

not have

.ApplyTimeOffset(false)  //Error
.AppointmentClick("onClick") //Error

We have more questions.

#2

Picture Capture_Schedule_No_03_01 - Capture_Schedule_No_03_02

I can change text for Day name (Thailand lang.) in header

- Monday to Thailand วันจันทร์ Short name จ.

- Tuesday to Thailand วันอังคาร Short name อ.

- Wednesday to Thailand วันพุธ Short name พ.

- Thursday to Thailand วันพฤหัสบดี Short name พฤ.

- Friday to Thailand วันศุกร์ Short name ศ.

- Saturday to Thailand วันเสาร์ Short name ส.

- Sunday to Thailand วันอาทิตย์ Short name อา.

Month name

1.     = "ม.ค" Full name มกราคม

2.     = "ก.พ";Full name กุมภาพันธ์

4.     = "เม.ย";Full name เมษายน

5.         = "พ.ค";Full name พฤษภาคม

6.     = "มิ.ย.";Full name มิถุนายน

7.     = "ก.ค";Full name กรกฏาคม

8.     = "ส.ค";Full name สิงหาคม

9.     = "ก.ย";Full name กันยายน

10.    = "ต.ค";Full name ตุลาคม

11.    = "พ.ย";Full name พฤศจิกายน

12.    = "ธ.ค";Full name ธันวาคม

3.     = "มี.ค";Full name มีนาคม

and change year to Buddhist Era

such as 2018 is 2561 is (2018 + 543 = 2561)

Attachment: Capture_Schedule_No_03_2f30b5e.zip

[Karthigeyan Krishnamurthi]

Hi Miclejee,   

   

Thanks for your update.  

 

Please find the below sample and responses for your queries.  

http://www.syncfusion.com/downloads/support/forum/141086/ze/Sample618978808 

 

1. ApplyTimeOffset and AppointmentClick are not defined correctly which is the cause for the issue. Kindly refer the below code example.

 

.ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom").AppointmentClick("onClick").QueryCellInfo("customDay") 

.Create("customName").ActionComplete("customName").AppointmentWindowOpen("onAppointmentOpen").BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom")) 

 

.AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor("UrlAdaptor")) 

   .ApplyTimeOffset(false) 

   .Id("Id") 

   .Subject("Subject") 

   .StartTime("StartTime") 

   .EndTime("EndTime") 

   .Description("Description") 

   .AllDay("AllDay") 

   .Recurrence("Recurrence") 

   .RecurrenceRule("RecurrenceRule") 

   .ResourceFields("OwnerId")) 

 

2. Day name can be customized using template option in all views except month as shown below.

 

.CellWidth("80px") 

.CellHeight("80px") 

.DateHeaderTemplateId("#dateTemplate") 

 

<script id="dateTemplate" type="text/x-jsrender"> 

    <div>{{:~dTemplate(date)}}</div> 

</script> 

 

function _dateFormat(date) { 

    var obj = $("#Schedule1").ejSchedule("instance"); 

    var dFormat = ej.format(new Date(date), "dddd dd", obj.model.locale); 

    return dFormat; 

} 

$.views.helpers({ dTemplate: _dateFormat }); 

 

3. In month view, day and month name can be customized using QueryCellInfo, Create and ActionComplete events as shown below

 

.ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom").AppointmentClick("onClick").QueryCellInfo("customDay")     .Create("customName").ActionComplete("customName").AppointmentWindowOpen("onAppointmentOpen").BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom")) 

 

function customName(args) { 

    var obj = $("#Schedule1").ejSchedule("instance"); 

    if (obj.model.orientation == "vertical" && obj.currentView() == "month" && (args.requestType == "viewNavigate" || args.requestType == "dateNavigate" || args.type == "create")) { 

        var rowIndex = (this.model.showWeekend) ? 7 : this.model.workWeek.length; 

        var timeCellIndex = 0; 

        for (var i = 0; i < obj._dateRender.length; i++) { 

            if ((i + 1) % rowIndex == 0) { 

                if (obj.model.showNextPrevMonth || obj.currentView() == "customview") { 

                    start = ej.format(new Date(obj._dateRender[i - (rowIndex - 1)]), "MMMM dd", obj.model.locale); 

                    end = ej.format(new Date(obj._dateRender[i]), "MMMM dd", obj.model.locale); 

                } 

                if (this.model.timeScale.enable) this.element.find(".e-timecelldivs").eq(timeCellIndex).html(start + " - " + end); 

                timeCellIndex++; 

            } 

        } 

    } 

} 

function customDay(args) { 

    var obj = $("#Schedule1").ejSchedule("instance"); 

    if (obj.model.orientation == "vertical" && obj.currentView() == "month" && args.requestType == "headercells") { 

        args.element.find(".e-headerdaydisplay").html(this._culture.calendar.days.names[this._culture.calendar.days.namesAbbr.indexOf(args.currentDay)]); 

    } 

} 

 

Note: Kindly use CellWidth and CellHeight as above to prevent cell misalignment while rendering full day and month name in all views. 

 

4. Year can be customized using Create and ActionComplete events as shown below.

 

function customName(args) { 

    var obj = $("#Schedule1").ejSchedule("instance"); 

    if (obj.model.orientation == "vertical" && (args.requestType == "viewNavigate" || args.requestType == "dateNavigate" || args.type == "create")) { 

        if (obj.currentView() == "month") { 

            var rowIndex = (this.model.showWeekend) ? 7 : this.model.workWeek.length; 

            var timeCellIndex = 0; 

            for (var i = 0; i < obj._dateRender.length; i++) { 

                if ((i + 1) % rowIndex == 0) { 

                    if (obj.model.showNextPrevMonth || obj.currentView() == "customview") { 

                        start = ej.format(new Date(obj._dateRender[i - (rowIndex - 1)]), "MMMM dd", obj.model.locale); 

                        end = ej.format(new Date(obj._dateRender[i]), "MMMM dd", obj.model.locale); 

                    } 

                    if (this.model.timeScale.enable) this.element.find(".e-timecelldivs").eq(timeCellIndex).html(start + " - " + end); 

                    timeCellIndex++; 

                } 

            } 

            temp = ej.format(obj.currentDate(), "MMM", obj.model.locale) + (new Date(obj.dateRender[0]).getFullYear() + 543).toString(); 

        } 

        if (obj.currentView() == "day") { 

            temp = ej.format(new Date(obj.dateRender[0]), "d MMM", obj.model.locale) + (new Date(obj.dateRender[obj.dateRender.length - 1]).getFullYear() + 543).toString(); 

        } 

        if (obj.currentView() == "week" || obj.currentView() == "workweek") { 

            temp = ej.format(new Date(obj.dateRender[0]), "d MMM", obj.model.locale) + " - " + ej.format(new Date(obj.dateRender[obj.dateRender.length - 1]), "d MMM", obj.model.locale) + (new Date(obj.dateRender[obj.dateRender.length - 1]).getFullYear() + 543).toString(); 

        } 

        $(".e-datedisplay").html(temp); 

    } 

} 

 

 

Regards, 

Karthigeyan  

 

[Karthigeyan Krishnamurthi]

Hi Miclejee,    

    

Thanks for your update.   

 

Regards, 

Karthigeyan 

 

[MJ]

Thank you for your advice.

THX. Very ...

We have more questions.

1. We can customize the edit window using AppointmentWindowOpen event.
2.  

"; 

        $("#Schedule1_AddEditForm").after(customDesign); 

        $("#URL").ejButton({ showRoundedCorner: true, width: "100px", size: "medium" }); 

    } else { 

        this._appointmentAddWindow.find("#URL").css("display", "none"); 

    } 

} 

function ok() { 

    //var obj = $("#Schedule1").data("ejSchedule"); 

    alert('URL button clicked') 

} 

.AppointmentWindowOpen("onAppointmentOpen") 

 

function onAppointmentOpen(args) { 

    if ($("#customfields").length == 0 && !ej.isNullOrUndefined(args.appointment)) { 

        var customDesign = "

'ok()' />

#1 in picture Capture_Schedule_No_04_01 - Capture_Schedule_No_04_02

URL Button Show in First time click only .

when I refresh webpage and click edit appointment show button URL for First time only.

#2  Capture_Schedule_No_04_03

I can uncheckbox All Day for default when edit/Create form open.

Please advise.

THX.

[MJ]

Hi Miclejee,   

   

Thanks for your update.  

 

Please find the below sample and responses for your queries.  

http://www.syncfusion.com/downloads/support/forum/141086/ze/Sample618978808 

 

1. ApplyTimeOffset and AppointmentClick are not defined correctly which is the cause for the issue. Kindly refer the below code example.

 

.ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom").AppointmentClick("onClick").QueryCellInfo("customDay") 

.Create("customName").ActionComplete("customName").AppointmentWindowOpen("onAppointmentOpen").BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom")) 

 

.AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor("UrlAdaptor")) 

   .ApplyTimeOffset(false) 

   .Id("Id") 

   .Subject("Subject") 

   .StartTime("StartTime") 

   .EndTime("EndTime") 

   .Description("Description") 

   .AllDay("AllDay") 

   .Recurrence("Recurrence") 

   .RecurrenceRule("RecurrenceRule") 

   .ResourceFields("OwnerId")) 

 

2. Day name can be customized using template option in all views except month as shown below.

 

.CellWidth("80px") 

.CellHeight("80px") 

.DateHeaderTemplateId("#dateTemplate") 

 

<script id="dateTemplate" type="text/x-jsrender"> 

    <div>{{:~dTemplate(date)}}</div> 

</script> 

 

function _dateFormat(date) { 

    var obj = $("#Schedule1").ejSchedule("instance"); 

    var dFormat = ej.format(new Date(date), "dddd dd", obj.model.locale); 

    return dFormat; 

} 

$.views.helpers({ dTemplate: _dateFormat }); 

 

3. In month view, day and month name can be customized using QueryCellInfo, Create and ActionComplete events as shown below

 

.ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom").AppointmentClick("onClick").QueryCellInfo("customDay")     .Create("customName").ActionComplete("customName").AppointmentWindowOpen("onAppointmentOpen").BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom")) 

 

function customName(args) { 

    var obj = $("#Schedule1").ejSchedule("instance"); 

    if (obj.model.orientation == "vertical" && obj.currentView() == "month" && (args.requestType == "viewNavigate" || args.requestType == "dateNavigate" || args.type == "create")) { 

        var rowIndex = (this.model.showWeekend) ? 7 : this.model.workWeek.length; 

        var timeCellIndex = 0; 

        for (var i = 0; i < obj._dateRender.length; i++) { 

            if ((i + 1) % rowIndex == 0) { 

                if (obj.model.showNextPrevMonth || obj.currentView() == "customview") { 

                    start = ej.format(new Date(obj._dateRender[i - (rowIndex - 1)]), "MMMM dd", obj.model.locale); 

                    end = ej.format(new Date(obj._dateRender[i]), "MMMM dd", obj.model.locale); 

                } 

                if (this.model.timeScale.enable) this.element.find(".e-timecelldivs").eq(timeCellIndex).html(start + " - " + end); 

                timeCellIndex++; 

            } 

        } 

    } 

} 

function customDay(args) { 

    var obj = $("#Schedule1").ejSchedule("instance"); 

    if (obj.model.orientation == "vertical" && obj.currentView() == "month" && args.requestType == "headercells") { 

        args.element.find(".e-headerdaydisplay").html(this._culture.calendar.days.names[this._culture.calendar.days.namesAbbr.indexOf(args.currentDay)]); 

    } 

} 

 

Note: Kindly use CellWidth and CellHeight as above to prevent cell misalignment while rendering full day and month name in all views. 

 

4. Year can be customized using Create and ActionComplete events as shown below.

 

function customName(args) { 

    var obj = $("#Schedule1").ejSchedule("instance"); 

    if (obj.model.orientation == "vertical" && (args.requestType == "viewNavigate" || args.requestType == "dateNavigate" || args.type == "create")) { 

        if (obj.currentView() == "month") { 

            var rowIndex = (this.model.showWeekend) ? 7 : this.model.workWeek.length; 

            var timeCellIndex = 0; 

            for (var i = 0; i < obj._dateRender.length; i++) { 

                if ((i + 1) % rowIndex == 0) { 

                    if (obj.model.showNextPrevMonth || obj.currentView() == "customview") { 

                        start = ej.format(new Date(obj._dateRender[i - (rowIndex - 1)]), "MMMM dd", obj.model.locale); 

                        end = ej.format(new Date(obj._dateRender[i]), "MMMM dd", obj.model.locale); 

                    } 

                    if (this.model.timeScale.enable) this.element.find(".e-timecelldivs").eq(timeCellIndex).html(start + " - " + end); 

                    timeCellIndex++; 

                } 

            } 

            temp = ej.format(obj.currentDate(), "MMM", obj.model.locale) + (new Date(obj.dateRender[0]).getFullYear() + 543).toString(); 

        } 

        if (obj.currentView() == "day") { 

            temp = ej.format(new Date(obj.dateRender[0]), "d MMM", obj.model.locale) + (new Date(obj.dateRender[obj.dateRender.length - 1]).getFullYear() + 543).toString(); 

        } 

        if (obj.currentView() == "week" || obj.currentView() == "workweek") { 

            temp = ej.format(new Date(obj.dateRender[0]), "d MMM", obj.model.locale) + " - " + ej.format(new Date(obj.dateRender[obj.dateRender.length - 1]), "d MMM", obj.model.locale) + (new Date(obj.dateRender[obj.dateRender.length - 1]).getFullYear() + 543).toString(); 

        } 

        $(".e-datedisplay").html(temp); 

    } 

} 

 

 

Regards, 

Karthigeyan  

 

Thank you for your advice.

THX. Very ...

We have more questions.

#1 in picture Capture_Schedule_No_04_01 - Capture_Schedule_No_04_02

URL Button Show in First time click only .

when I refresh webpage and click edit appointment show button URL for First time only.

#2  Capture_Schedule_No_04_03

I can uncheck for checkbox All Day for default when edit/Create form open.

#3 Capture_Schedule_No_05_01 -  Capture_Schedule_No_05_02

Year number Mismatch. correct 2561 but show 2018

Please advise.

THX.

Attachment: Capture_Schedule_No_05_X_389a7f1d.zip

[Vinitha Devi Murugan]

Hi Miclejee, 

Thanks for your update.  

Please find the below responses for your queries. 

Q1: Show URL button for edit appointment click. 

We have analyzed your query and we suggest to use below code in AppointmentWindowOpen method. 

 

.AppointmentWindowOpen("onAppointmentOpen")  

 

function onAppointmentOpen(args) { 

        this._appointmentAddWindow.find(".allday").ejCheckBox({ checked: false }); 

 

        if ($("#customfields").length == 0) { 

            var customDesign = "<tr id='customfields'><td><input type='button' id='URL' name='URL' value='URL' onclick='ok()' /></td></tr>"; 

            $("#Schedule1_AddEditForm").after(customDesign); 

            $("#URL").ejButton({ showRoundedCorner: true, width: "100px", size: "medium" }); 

        } 

        if(!ej.isNullOrUndefined(args.appointment)){ 

            this._appointmentAddWindow.find("#URL").css("display", "block"); 

        } 

        else { 

            this._appointmentAddWindow.find("#URL").css("display", "none"); 

        } 

    } 

 

 

Q2: Uncheck for checkbox AllDay for default when edit/create form open. 

 

We have overridden the _alldayCheck function on sample side to uncheck the allday field. Please refer below codes. 

 

<script type="text/javascript"> 

    // Uncheck allday field 

    ej.Schedule.prototype._alldayCheck = function (appointments) { 

        var proxy = this; 

        proxy._appointmentAddWindow.find(".allday").ejCheckBox({ checked: false }); 

    } 

</script> 

 

Q3: Year number Mismatch. 

 

we suggest you use the below highlighted code to overcome the issue and the same can be modified in previously provided sample and it will available in below link. 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/141086/ze/Sample-84111364  

 

@(Html.EJ().Schedule("Schedule1") 

            ……………. 

 

            .AgendaViewSettings(agenda => agenda.DateColumnTemplateId("#dateTemplates")) 

            .ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom").AppointmentClick("onClick").QueryCellInfo("customDay") 

                 .Create("customName").ActionComplete("customName").AppointmentWindowOpen("onAppointmentOpen").BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom")) 

              ……………. 

) 

= 

<!-- Template for date column --> 

<script id="dateTemplates" type="text/x-jsrender"> 

    <div style="height:100%"> 

        <div> 

            <div>{{:~dateDisplay(StartTime)}}</div> 

        </div> 

    </div> 

</script> 

 

 

<script type="text/javascript"> 

    // To Change the year in agenda view 

    function _getDate(date) { 

        var dateCol = new Date(date); 

        return dateCol.toLocaleDateString("th-TH"); 

    } 

 

    $.views.helpers({ 

        dateDisplay: _getDate, 

    }); 

    // To Change the year in Calendar 

    ej.Schedule.prototype._viewCalendar = function () { 

        var proxy = this; 

        if (!(((!ej.isNullOrUndefined(proxy.model.renderDates) && $.type(proxy.model.renderDates) == "array" && proxy.model.renderDates.length > 0) || proxy._resCustomView) && proxy.currentView() === "customview")) { 

            var obj = proxy.element.find("#" + proxy._id + "_navigator").data("ejDatePicker"); 

            if (obj) { 

                obj.show(); 

                proxy.element.find("#" + proxy._id + "_navigator").ejDatePicker({ value: new Date(proxy.currentDate()) }); 

                var controlmargin = proxy.element.offset(); 

                if (proxy.model.enableRTL) { 

                    var leftvalue = controlmargin.left + proxy.element.width() - 280; 

                    if (leftvalue < 0) leftvalue = 0; 

                } 

                else { 

                    var leftvalue = controlmargin.left + 55, winWidth = $(document).scrollLeft() + $(window).width(); 

                    if ((winWidth - leftvalue) < $("#e-" + proxy._id + "_navigator").width()) 

                        leftvalue = winWidth - $("#e-" + proxy._id + "_navigator").width(); 

                } 

                $("#e-" + proxy._id + "_navigator").css({ top: (controlmargin.top + 47) + "px", left: leftvalue + "px" }); 

            } 

            proxy.element.find(".e-workcells").removeClass("e-selectedCell").removeClass("e-mousehover"); 

            proxy.element.find(".e-appointment,.e-alldayappointment,.e-monthappointment").removeClass("e-selectedAppointment"); 

            changeValue(new Date(proxy.currentDate())); 

 

        } 

    } 

    function changeValue(value) { 

        var element = $('#e-Schedule1_navigator').find('.e-datepicker-headertext')[0].innerHTML; 

        var val = value.toLocaleDateString("th-TH"); 

        var text = element.split(' ')[0] + ' ' + val.split('/')[2]; 

        $('#e-Schedule1_navigator').find('.e-datepicker-headertext')[0].innerHTML = text; 

    } 

   function customName(args) { 

    // To Change the year in calendar navigation 

        this.element.find("#" + this._id + "_navigator").ejDatePicker({ 

            navigate: function (val) { 

                changeValue(val.date); 

            },   

        }); 

    } 

 

 

Kindly try with the above sample and let us know if you need any further assistance on this.  

 

Regards, 

M. Vinitha devi 

[MJ]

Thank you for your advice.

THX. Very ...

We have more questions.

#1 Picture Capture_Schedule_No_06_01

Can change colors for morning and afternoon bookings?

# I Can hide Checkbox All day/Recurrence

THX.

Attachment: Capture_Schedule_No_06_9b54e710.zip

[Karthigeyan Krishnamurthi]

Hi Miclejee, 

 

Thanks for your update. 

 

Please find the below sample and responses for your queries. 

http://www.syncfusion.com/downloads/support/forum/141086/ze/Sample1520712855 

 

1. Appointment color can be customized using template option.

 

.AppointmentTemplateId("#apptemplate") 

 

<script id="apptemplate" type="text/x-jsrender"> 

    {{if View == "month" && StartTime.getHours() >= 12 }} 

    <div style="height:100%; background-color:blue"> 

        <div style='float:left;'>{{:~format(StartTime,"strTime") }}</div> 

        <div style='float:left; '>{{:~format(EndTime,"endTime")}}</div><br> 

        <div>{{:Subject}}</div> 

    </div> 

    {{else}} 

    <div style="height:100%"> 

        <div style='float:left; '>{{:~format(StartTime,"strTime")}}</div> 

        <div style='float:left; '>{{:~format(EndTime,"endTime")}}</div> <br> 

        <div>{{:Subject}}</div> 

    </div> 

    {{/if}} 

 

</script> 

 

2. Kindly include the below line to hide the all-day and recurrence check box.

 

function onAppointmentOpen(args) { 

        this._appointmentAddWindow.find(".allday").ejCheckBox({ checked: false }); 

        this._appointmentAddWindow.find(".Schedule1parrow").css("display", "none"); 

        if ($("#customfields").length == 0) { 

            var customDesign = "<tr id='customfields'><td><input type='button' id='URL' name='URL' value='URL' onclick='ok()' /></td></tr>"; 

            $("#Schedule1_AddEditForm").after(customDesign); 

            $("#URL").ejButton({ showRoundedCorner: true, width: "100px", size: "medium" }); 

        } 

        if(!ej.isNullOrUndefined(args.appointment)){ 

            this._appointmentAddWindow.find("#URL").css("display", "block"); 

        } 

        else { 

            this._appointmentAddWindow.find("#URL").css("display", "none"); 

        } 

    } 

 

 

Regards, 

Karthigeyan