How to merge RadScheduler timeslots in Timeline view

2 posts, 1 answers
  1. Meng
    Meng avatar
    8 posts
    Member since:
    Jul 2016

    Posted 04 Nov Link to this post

    Hi There,

    Is it possible to merge RadScheduler timeslots in Timeline view? I would like to display the number of appointments over two days. Currently, I managed to do this on one day only. Please see the following example code, I displayed number '7' on Mondays, what I need is to display number '7' over both Mondays and Tuesdays timeslots. Screenshot attached. Any suggestions will be greatly appreciated. Thank you!

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadSchedulerTimeLineViewModification.aspx.cs" Inherits="RadSchedulerWebForm" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
            .rsMainHeader
            {
                    width: auto !important;
                    text-align:Left !important;
                    padding-right:5px !important;
            }
            .MySlotGreen
           {
            color: #fff !important;  
            text-align:center !important;
            background-color:#69690a !important;
           }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <div style="width: 980px;">
                <telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedView="TimelineView" ShowViewTabs="false" OnTimeSlotCreated="RadScheduler1_TimeSlotCreated"
                OnNavigationComplete="RadScheduler1_NavigationComplete" ColumnWidth="28" StartInsertingInAdvancedForm="true" AppointmentStyleMode="Default">
                    <TimelineView SlotDuration="1" NumberOfSlots="30" GroupBy="User, Month" GroupingDirection="Vertical" ColumnHeaderDateFormat="MMM dd ddd" HeaderDateFormat="MMMM, yyyy"/> 
                </telerik:RadScheduler>
            </div>
        </form>
    </body>
    </html>

     

    Code Behind:

    using System;
    using System.Data;
    using System.Configuration;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
    using Telerik.Web.UI.Calendar;
    using Telerik.Web.UI.Calendar.View;
     
    public partial class RadSchedulerWebForm : System.Web.UI.Page
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            RadScheduler1.Provider = new XmlSchedulerProvider(Server.MapPath("~/App_Data/Appointments.xml"), true);
        }
     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack & RadScheduler1.SelectedView == SchedulerViewType.TimelineView)
            {
                int year = RadScheduler1.SelectedDate.Year;
                int month = RadScheduler1.SelectedDate.Month;
                int numberOfDaysInCurrentMonth = DateTime.DaysInMonth(year, month);
                RadScheduler1.SelectedDate = new DateTime(year, month, 1);
                RadScheduler1.TimelineView.NumberOfSlots = numberOfDaysInCurrentMonth;
            }
        }
     
        protected void RadScheduler1_NavigationComplete(object sender, SchedulerNavigationCompleteEventArgs e)
        {
            if (RadScheduler1.SelectedView == SchedulerViewType.TimelineView)
            {
                int year = RadScheduler1.SelectedDate.Year;
                int month = RadScheduler1.SelectedDate.Month;
                int numberOfDaysInCurrentMonth = DateTime.DaysInMonth(year, month);
                RadScheduler1.SelectedDate = new DateTime(year, month, 1);
                RadScheduler1.TimelineView.NumberOfSlots = numberOfDaysInCurrentMonth;
            }
        }
     
        protected void RadScheduler1_TimeSlotCreated(object sender, Telerik.Web.UI.TimeSlotCreatedEventArgs e)
        {
            if (RadScheduler1.SelectedView == SchedulerViewType.TimelineView)
            {
                if (e.TimeSlot.Start.Date.DayOfWeek == DayOfWeek.Monday)
                {
                    Label numberLabel = new Label();
                    numberLabel.Text = "7";
                    e.TimeSlot.CssClass = "MySlotGreen";
     
                    e.TimeSlot.Control.Controls.Add(numberLabel);
                }
            }
        }
    }

     

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    830 posts

    Posted 09 Nov Link to this post

    Hello Meng Li,

    Merging timeslots is not supported and contradicts the Scheduler's design. For an appointment to be shown over two timeslots, Monday and Tuesday for instance, the appointment must start on Monday and end on Tuesday: screenshot.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top