TimeLineView always from 08:00 - 20:00

[Datamex]

Dear Telerik,

Would it be possible to realize the following: I want the timelineview to start at 08:00 and show 24 slots of half an hour (0:30:00). When I click the arrow to go to the next day, the TimeLineView now just shows me the next 24 slots of half an hour, but I just want it to show the next day, starting from 08:00 again... Would this be possible?

[Shinu]

Hello,

Try setting the properties under TimelineView as shown below and see whether it is working as you expected.

aspx:

<telerik:RadScheduler ID="RadScheduler1" runat="server" DataEndField="End" DataKeyField="ID"
    DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentID"
    DataSourceID="SqlDataSource2" DataStartField="Start" DataSubjectField="Subject">
    <TimelineView NumberOfSlots="48" ColumnHeaderDateFormat="t"
        SlotDuration="00:30:00" StartTime="08:00:00" />
</telerik:RadScheduler>

-Shinu.

[Datamex]

No, it doesn't. Now it also shows me the next 48 slots of half an hour when I click on the arrow to the right. I want the TimeLine just to skip to the next day.

Example:
I show 20-10-2009 08:00 - 20:00 in the timelineview, I click on the next arrow and I just want to show 21-10-2009 08:00 - 20:00.

[Yana]

Hi Datamex,

You should subscribe to OnNavigationCommand event and add one day to the SelectedDate property of the scheduler in order to navigate to the next day like this:

protected void RadScheduler1_NavigationCommand(object sender, SchedulerNavigationCommandEventArgs e)
{
    if (e.Command == SchedulerNavigationCommand.NavigateToNextPeriod)
    {
        RadScheduler1.SelectedDate = rsAgenda.SelectedDate.AddDays(1);
        e.Cancel = true;
    }
}

the timelineview settings should be like this:

<TimelineView NumberOfSlots="25" ColumnHeaderDateFormat="t"
            SlotDuration="00:30:00" StartTime="08:00:00"  />

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Datamex]

Would it be possible to do this client-side by using the OnClientNavigationCommand event? And how?

-edit-

No matter, fixed it! Here's the code to do it!

function NavigationCommand(sender, args) {
      if (args.get_command() == Telerik.Web.UI.SchedulerNavigationCommand.NavigateToNextPeriod) {
        var scheduler = $find('<%=RadScheduler.ClientID %>');
        scheduler.set_selectedDate(Date.DateAdd("d", 1, scheduler.get_selectedDate()));
        args.set_cancel(true);
      }

      if (args.get_command() == Telerik.Web.UI.SchedulerNavigationCommand.NavigateToPreviousPeriod) {
        var scheduler = $find('<%=RadScheduler.ClientID %>');
        scheduler.set_selectedDate(Date.DateAdd("d", -1, scheduler.get_selectedDate()));
        args.set_cancel(true);
      }
    }

    Date.IsDate = function(p_Expression) {
      return !isNaN(new Date(p_Expression));    // <-- review further
    }

    Date.CDate = function(p_Date) {
      if (Date.IsDate(p_Date)) { return new Date(p_Date); }

      var strTry = p_Date.replace(/\-/g, '/').replace(/\./g, '/').replace(/ /g, '/'); // fix separators
      strTrystrTry = strTry.replace(/pm$/i, " pm").replace(/am$/i, " am"); // and meridian spacing
      if (Date.IsDate(strTry)) { return new Date(strTry); }

      var strTrystrTryYear = strTry + '/' + new Date().getFullYear(); // append year
      if (Date.IsDate(strTryYear)) { return new Date(strTryYear); }


      if (strTry.indexOf(":")) {    // if appears to have time
        var strTrystrTryYear2 = strTry.replace(/ /, '/' + new Date().getFullYear() + ' '); // insert year
        if (Date.IsDate(strTryYear2)) { return new Date(strTryYear2); }

        var strTryDate = new Date().toDateString() + ' ' + p_Date; // pre-pend current date
        if (Date.IsDate(strTryDate)) { return new Date(strTryDate); }
      }

      return false; // double as looser IsDate
      //throw("Error #13 - Type mismatch"); // or is this better?
    }



    Date.DateAdd = function(p_Interval, p_Number, p_Date) {
      if (!Date.CDate(p_Date)) { return "invalid date: '" + p_Date + "'"; }
      if (isNaN(p_Number)) { return "invalid number: '" + p_Number + "'"; }

      p_Number = new Number(p_Number);
      var dt = Date.CDate(p_Date);

      switch (p_Interval.toLowerCase()) {
        case "yyyy":
          {
            dt.setFullYear(dt.getFullYear() + p_Number);
            break;
          }
        case "q":
          {
            dt.setMonth(dt.getMonth() + (p_Number * 3));
            break;
          }
        case "m":
          {
            dt.setMonth(dt.getMonth() + p_Number);
            break;
          }
        case "y":       // day of year
        case "d":       // day
        case "w":
          {     // weekday
            dt.setDate(dt.getDate() + p_Number);
            break;
          }
        case "ww":
          { // week of year
            dt.setDate(dt.getDate() + (p_Number * 7));
            break;
          }
        case "h":
          {
            dt.setHours(dt.getHours() + p_Number);
            break;
          }
        case "n":
          {     // minute
            dt.setMinutes(dt.getMinutes() + p_Number);
            break;
          }
        case "s":
          {
            dt.setSeconds(dt.getSeconds() + p_Number);
            break;
          }
        case "ms":
          { // JS extension
            dt.setMilliseconds(dt.getMilliseconds() + p_Number);
            break;
          }
        default:
          {
            return "invalid interval: '" + p_Interval + "'";
          }
      }
      return dt;
    }

-/edit-