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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

I want set Do not want same day booking.

Thread ID:

Created:

Updated:

Platform:

Replies:

141086 Nov 23,2018 02:36 AM UTC Dec 6,2018 10:39 AM UTC ASP.NET MVC - EJ 2 13
loading
Tags: Schedule
MJ
Asked On November 23, 2018 02:36 AM UTC

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 [Syncfusion]
Replied On November 23, 2018 12:35 PM UTC

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. 
  
@(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
Replied On November 27, 2018 03:18 AM UTC

Thank you for your advice.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On November 27, 2018 03:47 AM UTC

 
Thanks for your update. 
 
Regards, 
Karthigeyan 
 


MJ
Replied On November 29, 2018 04:31 AM UTC

 
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 [Syncfusion]
Replied On November 29, 2018 08:28 AM UTC

Hi Miclejee,  
  
Thanks for your update. 
 
Please find the below sample and responses for your queries. 
 
  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")) 
 
  1. 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; 
} 
 
  1. 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') 
} 
 
  1. 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
Replied On November 30, 2018 05:20 AM UTC

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)




Karthigeyan Krishnamurthi [Syncfusion]
Replied On November 30, 2018 09:35 AM UTC

Hi Miclejee,   
   
Thanks for your update.  
 
Please find the below sample and responses for your queries.  
 
  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")) 
 
  1. 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 }); 
 
  1. 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. 
 
  1. 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 [Syncfusion]
Replied On December 4, 2018 03:43 AM UTC

    
Thanks for your update.   
 
Regards, 
Karthigeyan 
 


MJ
Replied On December 4, 2018 03:49 AM UTC

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
Replied On December 4, 2018 04:18 AM UTC

Hi Miclejee,   
   
Thanks for your update.  
 
Please find the below sample and responses for your queries.  
 
  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")) 
 
  1. 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 }); 
 
  1. 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. 
 
  1. 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 [Syncfusion]
Replied On December 5, 2018 06:11 PM UTC

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. 
 
 
@(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
Replied On December 6, 2018 04:49 AM UTC

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 [Syncfusion]
Replied On December 6, 2018 10:39 AM UTC

Hi Miclejee, 
 
Thanks for your update. 
 
Please find the below sample and responses for your queries. 
 
  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> 
 
  1. 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;