Wrong Time Zone in scheduled appointment

[CLAUDIO RICCARDI]

Hello,

I save time zone info (Rome time zone UTC +01:00) into a database table, along with tha start date and end date of the appointment.

When I retreive appointments from database, the original datetime is shifted 2 hours back, that is if appointment starts at 10:00 (UTC +1:00), on the schedule control I see the slot starting at 8:00.

I guess there is some problem with Time Zone application.

This is my schedule definition:

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

                  .Locale("it-IT")

                  .Width("100%")

                  .Height("800px")

                  .Views(view)

                  .Orientation(Orientation.Horizontal)

                  .ShowCurrentTimeIndicator(true)

                  .CategorizeSettings(fields => fields.Datasource(ViewBag.categorize).Enable(true).AllowMultiple(false).Id("id").Text("text").Color("color").FontColor("fontColor"))

                  .DateFormat("dd/MM/yyyy")

                  .AllowDragDrop(true)

                  .EnableAppointmentResize(true)

                  .CurrentDate(System.DateTime.Now)

                  .TimeMode(Syncfusion.JavaScript.TimeMode.Hour24)

                  .TimeScale(t => t.majorSlot(60).minorSlotCount(3))

                  .TimeZone("UTC +01:00")

                  .Resources(res =>

                  {

                      res.Field("OperatorId").Title("Operator").Name("Operators").AllowMultiple(true)

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

                  })

                  .Group(gr =>

                  {

                      gr.Resources(ViewBag.Resources);

                  })

                  .AppointmentSettings(fields => fields.Datasource(

                      ds => ds.URL("../WorkActivity/GetPlannedActivities")

                          .BatchURL("../WorkActivity/Batch")

                          .CrudURL("../WorkActivity/Batch")

                          .UpdateURL("../WorkActivity/UpdatePlannedActivity")

                          .RemoveURL("../WorkActivity/RemovePlannedActivity")

                          .InsertURL("../WorkActivity/AddPlannedActivity")

                          .Adaptor(AdaptorType.UrlAdaptor))

                      .Id("Id")

                      .Subject("Subject")

                      .StartTime("StartTime")

                      .EndTime("EndTime")

                      .StartTimeZone("StartTimeZone")

                      .EndTimeZone("EndTimeZone")

                      .Description("Description")

                      .AllDay("False")

                      .Recurrence("")

                      .RecurrenceRule("")

                      .Categorize("Categorize")

                      .ResourceFields("OperatorId")

                  )

                  .AppointmentTemplateId("#WorkActivityTemplate")

                  .ScheduleClientSideEvents(evt =>

                      evt.Create("onCreate")

                          .CellClick("onCellClick")

                          .AppointmentClick("onAppointmentClick")

                          .AppointmentWindowOpen("onAppointmentWindowOpen")

                          .AppointmentCreated("onAppointmentCreated")

                          .AppointmentRemoved("onAppointmentRemoved")

                          .AppointmentChanged("onAppointmentChanged")

                          .BeforeAppointmentCreate("onBeforeAppointmentCreate")

                          .ResizeStop("onResizeStop")

                          .ActionComplete("onActionComplete")

                          .DragStop("onDragStop")

                  ))

Thanks in advance.

Claudio

[Karthigeyan Krishnamurthi]

Hi CLAUDIO, 

 

Thank you for contacting Syncfusion support. 

 

To render an appointment as same as the time given in data base, we suggest you to use ApplyTimeOffset property and for the same we have prepared the sample which can be download from the below location. 

http://www.syncfusion.com/downloads/support/forum/129033/ze/Sample855789097 

 

Kindly refer the below code example used in the sample. 

 

<Code> 

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

        .Width("100%") 

        .Height("525px") 

        .TimeZone("UTC +01:00") 

        .CurrentDate(new DateTime(2016, 10, 29)) 

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

        .ApplyTimeOffset(false) 

                .Id("Id") 

                    .Subject("Subject") 

                    .StartTime("StartTime") 

                    .EndTime("EndTime") 

                    .StartTimeZone("StartTimeZone") 

                    .EndTimeZone("EndTimeZone") 

                    .AllDay("AllDay") 

                    .Recurrence("Recurrence") 

                    .RecurrenceRule("RecurrenceRule")) 

) 

 

</Code> 

 

Regards, 

Karthigeyan 

[CLAUDIO RICCARDI]

Hi Karthigeyan,

I have set the ApplyTimeOffset property to false but nothing changes.

Now the schedule is initialized like this:

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

                  .Locale("it-IT")

                  .Width("100%")

                  .Height("800px")

                  .Views(view)

                  .Orientation(Orientation.Horizontal)

                  .ShowCurrentTimeIndicator(true)

                  .CategorizeSettings(fields => fields.Datasource(ViewBag.categorize).Enable(true).AllowMultiple(false).Id("id").Text("text").Color("color").FontColor("fontColor"))

                  .DateFormat("dd/MM/yyyy")

                  .AllowDragDrop(true)

                  .EnableAppointmentResize(true)

                  .CurrentDate(System.DateTime.Now)

                  .TimeMode(Syncfusion.JavaScript.TimeMode.Hour24)

                  .TimeScale(t => t.majorSlot(60).minorSlotCount(3))

                  .TimeZone("UTC +01:00")

                  .Resources(res =>

                  {

                      res.Field("OperatorId").Title("Operator").Name("Operators").AllowMultiple(true)

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

                  })

                  .Group(gr =>

                  {

                      gr.Resources(ViewBag.Resources);

                  })

                  .AppointmentSettings(fields => fields.Datasource(

                      ds => ds.URL("../WorkActivity/GetPlannedActivities")

                          .BatchURL("../WorkActivity/Batch")

                          .CrudURL("../WorkActivity/Batch")

                          .UpdateURL("../WorkActivity/UpdatePlannedActivity")

                          .RemoveURL("../WorkActivity/RemovePlannedActivity")

                          .InsertURL("../WorkActivity/AddPlannedActivity")

                          .Adaptor(AdaptorType.UrlAdaptor))

                      .ApplyTimeOffset(false)

                      .Id("Id")

                      .Subject("Subject")

                      .StartTime("StartTime")

                      .EndTime("EndTime")

                      .StartTimeZone("StartTimeZone")

                      .EndTimeZone("EndTimeZone")

                      .Description("Description")

                      .AllDay("False")

                      .Recurrence("")

                      .RecurrenceRule("")

                      .Categorize("Categorize")

                      .ResourceFields("OperatorId")

                  )

                  .AppointmentTemplateId("#WorkActivityTemplate")

                  .ScheduleClientSideEvents(evt =>

                      evt.Create("onCreate")

                          .CellClick("onCellClick")

                          .AppointmentClick("onAppointmentClick")

                          .AppointmentWindowOpen("onAppointmentWindowOpen")

                          .AppointmentCreated("onAppointmentCreated")

                          .AppointmentRemoved("onAppointmentRemoved")

                          .AppointmentChanged("onAppointmentChanged")

                          .BeforeAppointmentCreate("onBeforeAppointmentCreate")

                          .ResizeStop("onResizeStop")

                          .ActionComplete("onActionComplete")

                          .DragStop("onDragStop")

                  ))

As you can see from the attached image, the tooltip show the correct start time (10:20:00), but the slot on the schedule starts at 8:20:00...

Claudio

Attachment: issue_410d42f2.zip

[CLAUDIO RICCARDI]

Actually, it seems that horizontal timeline is not aligned with time slots.

.TimeMode(Syncfusion.JavaScript.TimeMode.Hour24)

                  .TimeScale(t => t.majorSlot(60).minorSlotCount(3))

                  .TimeZone("UTC +01:00")

The highlighted property correctly creates 3 slots for each hour (20 minutes for each slot), but if you look at the horizontal timeline you will see that the day does not starts at 00:00...

Claudio

[CLAUDIO RICCARDI]

Hi,

as you can see in the attache image, the problem is related to the graphical offset of the timeline table cell.

At time 00:00 the timeline and the tiem slots start together.

At time 01:00 there is a little offset in the timeline. This offset increases every hour and every day...so, for example, at friday there will be a great difference between time slots division (correct) and timeline hours.

Hope this helps.

Claudio

Attachment: issue_dabc1fae.zip

[CLAUDIO RICCARDI]

Hi,

I have overwritten the following css classes:

        .e-schedule .e-horizontaltimetd {

            border-bottom: 3px solid #179bd7 !important;

            border-top: 1px solid #c8c8c8 !important;

            border-left: 0;

        }

        .e-schedule .e-horizontalalternatetd {

            border-bottom: 3px solid #179bd7 !important;

            border-left: 0;

            border-top: 1px solid #c8c8c8 !important;

        }

Now the graphic offset between timeline and time slots is acceptable...

Claudio

[Karthigeyan Krishnamurthi]

Hi Claudio, 

 

Thanks for your update. 

 

We suspect that default CSS are overridden/not applied correctly which is the cause for the issue. We have checked the reported issue “Cells are misaligned” with the provided code example and unable to reproduce the reported issue at our end and sample can be download from the below link. 

http://www.syncfusion.com/downloads/support/forum/129033/ze/Sample1091693133 

 

Kindly ensure that CSS files are referred correctly in your sample. 

 

Regards, 

Karthigeyan