Shedule template

[Fanisa]

Is it possible to have appointments fitted only to their startdate cell? They should not be stretching out into other sells to indicate when they end but rather saty in the startdate cell regardless of enddate.

Also how do I remove the "allday" row in week view?

[Velmurugan S]

Hi Fanisa,

Thanks for contacting Syncfusion support.

We have analyzed your requirements and understood that you want to disable the “allDay row and display the appointments without stretching”, which can be achieved by diabling the TimeScale Property. Please find the following code example to disable the TimeScale.

<Code>

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

        .Width("100%")

        .Height("525px")

        .TimeMode(Syncfusion.JavaScript.TimeMode.Hour12)

        .CurrentDate(new DateTime(2014,6,2))

        .ShowTimeScale(false)

        
</code>

We have prepared the sample with the above code example, which can be downloaded from the following location,

http://www.syncfusion.com/downloads/support/forum/121283/ze/TimeScale-1462087492

In the above sample, the allday row will not be displayed in all the views, also the appointment will be displayed in same height for all time intervals.

Note: If we had misunderstood your requirement, kindly let us know what you mean by startdate cell and how do you expect to fit the appointment in that. Also, please share the screenshot, if possible, to analyse those scenarios and provide the possible solution.

Regards, 
Velmurugan

[Ramya Jayapandi]

From: Shendelana, Fanisa

Sent: Friday, January 29, 2016 6:27 AM
To: Syncfusion Support <[e-mail]>
Subject: RE: Syncfusion support community forum 121283, Shedule template, has been updated.

Hi your solution didn’t work for this,

Instead, it hides all the appointments as they are in the allday field in week view.




How do I make it appear like this as per your sample:

[Velmurugan S]

Hi Fanisa,

We regret for the inconvenience caused. We have modified the previously given sample to meet your requirements “Fitting appointments only to their startdate cell and hiding the allday row in week view” , which can be downloaded from the following location.

http://www.syncfusion.com/downloads/support/forum/121283/ze/TimeScale1541836742

In the above sample, we have set the appointment width and height based on the currentview to meet your requirement “Fitting appointments only to their startdate cell”. For example, if we create an appointment with the StartTime ( 2014/6/3 6:30:00) and EndTime (2014/6/3 7:30:00) with 1 hour difference, then the appointment is made to display only on the startTime cell (i.e 6.30) as shown in the below screenshot.



Also, you can remove/hide the allday row by disabling the schedule property “ShowAllDayRow”. Please refer to our UG documentation from the following location to know more about the “ShowAllDayRow” property.
http://help.syncfusion.com/aspnetmvc/schedule/appearance-and-styling#showhide-all-day-show

We have hided the allday row only in week view as per your requirement by using the following code example, which is also included in the above sample.

Please refer to the following code example, which is used in the above sample.

<code>

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

        .Width("100%")

        .Height("525px")

        .TimeMode(Syncfusion.JavaScript.TimeMode.Hour12)

        .CurrentDate(new DateTime(2014, 6, 2))

        .CurrentView(CurrentView.Day)

        .ScheduleClientSideEvents(eve => eve.Navigation("OnNavigation").Create("OnCreate").ActionComplete("SetAllDayAppointmentWidth").AppointmentSaved("OnAppointmentSave"))

        .AppointmentSettings(fields => fields.Datasource(Model)

            .Id("Id")

            .Subject("Subject")

            .StartTime("StartTime")

            .EndTime("EndTime")

            .AllDay("AllDay")

            .Recurrence("Recurrence")

            .RecurrenceRule("RecurrenceRule"))

)

<script type="text/javascript">

    function OnNavigation(args) { // This block code will execute to meet your requirement "hide allday row"

        if (args.currentView == "week")

            $("#Schedule1").ejSchedule({ showAllDayRow: false });  // Here we are hiding the allday row only for the week view

        else

            $("#Schedule1").ejSchedule({ showAllDayRow: true });   // Here we are showing the allday row for the day, workweek views

    }

    function OnCreate() {

        $(".e-appointment").css("height", $(".e-workcells").height() - 1);  // Here we are setting the height value for the initial rendering

    } 

    function SetAllDayAppointmentWidth(args) {

        if (args.model.currentView == "day")

            $(".e-alldayappointment").css("width", $(".e-alldaycells").width() - 1);  // Here we are setting the allday appointment width for day view display

        else if (args.model.currentView == "month")

            $(".e-monthappointment").css("width", $(".e-monthcells").width() - 1);

        else

            $(".e-alldayappointment").css("width", $(".e-alldaycells").width() - 1);   // Here we are setting the allday appointment width for week and workweek views display

        $(".e-appointment").css("height", $(".e-workcells").height() - 1);

    }

    function OnAppointmentSave(args) { // This block code example will used to meet your requirement while creating multi day appointment

        var appStatus = args.appointment.EndTime.getDate() > args.appointment.StartTime.getDate() ? true : false;

        if (appStatus) {

            args.cancel = true;

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

            var obj = {},temp=0;

            obj["Subject"] = args.appointment.Subject;

            obj["StartTime"] = args.appointment.StartTime;

            temp = new Date(args.appointment.StartTime);

            obj["EndTime"] = new Date(temp.setMinutes(temp.getMinutes() + 30));

            schObj.saveAppointment(obj);

        }

    }
</script>
</code>

Note: If the above solution doesn’t meet your requirement or still we have misunderstood your requirement, kindly let us know what you mean by startdate cell and how do you expect to fit the appointment in that. Also, please share the screenshots that shows your requirement clearly if possible or details of the issue if you are facing anything. So, that we can analyze your requirements and provide you the possible solution.

Regards,
Velmurugan

[Fanisa]

Please note that I do not use your method of creating appointments, They are created in the backend and i refresh the schedule. All that happens is that the appointment are retrieved and I bind them to the schedule like this:

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

      .Width("100%")

      .Height("650px")

      .AllowKeyboardNavigation(true)

      .Locale("en-US")      

              .IsResponsive(true)       

    .AllowDragDrop(false)      

       .ContextMenuSettings(menu => menu.Enable(true))

    .CurrentView(CurrentView.Month)

    .EnableLoadOnDemand(true)

    .ScheduleClientSideEvents(eve => eve.CellDoubleClick("onOpen"))

            .ScheduleClientSideEvents(eve => eve.AppointmentHover("recordDetails"))

                             .ScheduleClientSideEvents(eve => eve.CellHover("recordDetails"))

                                .ScheduleClientSideEvents(eve => eve.Create("filters"))

                                .ScheduleClientSideEvents(eve => eve.CellClick("cell"))

                            .ScheduleClientSideEvents(eve => eve.AppointmentClick("onAppointmentClick"))                        

                .ScheduleClientSideEvents(eve => eve.BeforeContextMenuOpen("popCustomContextMenu"))

 .AppointmentSettings(fields => fields.Datasource(ds => ds.URL(Url.Action("GetData", "Home")).Adaptor(AdaptorType.UrlAdaptor))

  .Id("Id")

    .Subject("Subject")

    .StartTime("StartTime")

    .EndTime("EndTime")

    .AllDay("AllDay")

    .Recurrence("Recurrence")

    .RecurrenceRule("RecurrenceRule"))  

     .ShowAllDayRow(false))

Please proviode a suitable solution. There will be no adding event as i've disabled it

[Fanisa]

Your example says currentview is "day" pls change it to week when you come back with a response

[Velmurugan S]

Hi Fanisa,

Thanks for your update.

We have prepared the sample to meet your requirement based on the given code example and the local database (ScheduleData.mdf) for databinding, which can be downloaded from the following location.
http://www.syncfusion.com/downloads/support/forum/121283/ze/FitAppointment-703674667

In the above sample, we have set the “appointment height” to fit the appointment only in the starttime cell. For example, if the appointment in the database with StartTime (ex: 1/2/2016 11:00:00 AM) and EndTime (ex: 1/2/2016 12:00:00 PM) means we have displayed this appointment only in the StartTime Cell (i.e. 11:00:00 AM). Please find the following code example (i.e. setting height) we have used in the above sample.

<code>

<style>

    .e-appointment {

        height: 19px !important;

    }
</style>

</code>

We have also included the CRUD operation code example in the above sample to display the appointment properly while performing the create, update and delete, as we have found that you have enabled the “LoadOnDemand” in your application(as per your code example).

Please try the above sample, if you  face any issues, revert  by reproducing the issue in the above sample or share the following information with us, so that we can analyze those scenarios and provide you the possible solution.

a)      Complete code example of your application that uses Scheduler part (ViewPage, Controller Page).

b)      What do you mean by StartDate Cell?

c)       How do you expecting to fit the appointment (Screenshot if possible).

d)      Appointment details like ( StartTime and EndTime) or Share the Appointment Table data.

e)      Share the details if you are rendering the multiple-day appointment.


Regards,
Velmurugan

SIGN IN To post a reply.

• 6 Replies
• 3 Participants
• Want to subscribe?
  SIGN IN
• Created by
  FA Fanisa
• Platform
  ASP.NET MVC
• Control
  Schedule
• Created On
  Nov 26, 2015 10:58 AM UTC
• Last Activity On
  Feb 3, 2016 07:15 AM UTC