This is a migrated thread and some comments may be shown as answers.

changing the view for appointments

14 Answers 293 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

John Giblin asked on 09 Feb 2009, 05:45 AM

I looking to make a appointment scheduler that has 3 distinct views.
1) For the business schedule. IE Monday-Friday 9-5
2) Business appointments, which contains all the client appointments
2) The client: show only their appointments and what is available based on the business schedule

All of the appointment would be tagged with a custom attribute called type, which would be either business or client. I wanted to business to go in a create their schedule, which would be tagged business.

I don't think 1 and 2 are difficult since you can change the query for each one them. One asking for the business and the other for client.

The problem is 3. I want the client to see availability based on the business schedule. Also, to mark off times when other people have made appointments. I dont want to see either these in the scheduler as appointments. What I wanted to do in the TimeSlotCreated event was if the custom attribute was for the business, not to show the appointment, but I did want to change the cssclass field available style. If the appointment was by another person, I wanted again not show it as an appointment,but I also wanted to change to cssclas field to a taken style. and lastly for the use to show their appointment.

any direction is appreciated. i tried removing an appointment in the TimeSlotCreated event. I was also thinking of having 2 schedulers on the page. one that was not visiable and using the data from the other one to do this.

14 Answers, 1 is accepted

answered on 02 Sep 2011, 04:12 AM

Hi,
I am pasting the files as I was not able to attact(perhaps takes only images).
I need direction for the following points:
1.How to go about the refresh appointments on the next Page or Prev page click.(the appointments are not visible when i click on next prev but they are visble when i click in Next/Prev and then click on the Date)
2.Also I have defined a header template (the Resources are the header template). Can i define diffferent colors for each header template , so that each resource appears distinguishable.
3. Can I add different images to each of the appointments.

The following is the Default.aspx

@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html xmlns="http://www.w3.org/1999/xhtml">

< head runat="server">

</head>
<body>

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

/* Firefox resize scrollable content */

function hideScrollableArea(sender, eventArgs) {

if ($telerik.isFirefox)

$telerik.$(

'.rsContentScrollArea').css('overflow', 'hidden');

}

function showScrollableArea(sender, eventArgs) {

if ($telerik.isFirefox)

$telerik.$(

'.rsContentScrollArea').css('overflow', 'auto');

}

</script>

<asp:LinkButton runat="server" ID="PrevPage" Text="Previous" OnClick="PrevPage_Click" />

<asp:LinkButton runat="server" ID="NextPage" Text="Next" OnClick="NextPage_Click" />

<telerik:RadScheduler runat="server" ID="RadScheduler1" Width="950px" DayStartTime="08:00:00"

DayEndTime="18:00:00" TimeZoneOffset="03:00:00" DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End" DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentId" DataReminderField="Reminder" OnDataBound = "RadScheduler1_DataBound" AllowEdit="false" EnableViewState="true" ViewStateMode="Enabled">

<asp:Panel ID="ResourceImageWrapper" runat="server" CssClass="ResCustomClass">

<asp:Label ID="ResourceLabel" runat="server" Text='<%# Eval("Text") %>' Width=222px></asp:Label>

</asp:Panel>

</ResourceHeaderTemplate>

</telerik:RadScheduler>

</div>

</form>

</body>

</html>

The Following is the cs file:

using

System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

using System.Collections.Generic;

using System.Drawing;

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

private const string AppointmentsKey = "Telerik.Web.Examples.Scheduler.BindToList.CS.Apts";

int i = 0;

private List<AppointmentInfo> Appointments

{

get

{

List<AppointmentInfo> sessApts = Session[AppointmentsKey] as List<AppointmentInfo>;

if (sessApts == null)

{

sessApts = new List<AppointmentInfo>();

Session[AppointmentsKey] = sessApts;

}

return sessApts;

}

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

if (!IsPostBack)

{

Session.Remove(AppointmentsKey);

InitializeAppointments();

ResourceType resType = new ResourceType("User");

resType.ForeignKeyField = "UserID";

RadScheduler1.ResourceTypes.Add(resType);

RadScheduler1.GroupBy = "User";

}

RadScheduler1.DataSource = Appointments;

RadScheduler1.DataBind();

}

private void InitializeResources()

{

Resource r = new Resource("User", 1, "Alex");

//r.CssClass = "rsCategoryPink";

RadScheduler1.Resources.Add(r);

RadScheduler1.Resources.Add(new Resource("User", 2, "Bob"));

RadScheduler1.Resources.Add(new Resource("User", 3, "Charlie"));

RadScheduler1.Resources.Add(new Resource("User", 4, "Dany"));

RadScheduler1.Resources.Add(new Resource("User", 5, "Eric"));

RadScheduler1.Resources.Add(new Resource("User", 6, "Ganguly"));

RadScheduler1.Resources.Add(new Resource("User", 7, "Haris"));

RadScheduler1.Resources.Add(new Resource("User", 8, "Indira"));

RadScheduler1.Resources.Add(new Resource("User", 9, "jack"));

}

private void InitializeAppointments()

{

DateTime start = DateTime.UtcNow.Date;

start = start.AddHours(6);

Appointments.Add(new AppointmentInfo("Driving", start, start.AddHours(2), string.Empty, null, string.Empty, 1));

Appointments.Add(new AppointmentInfo("Passive", start.AddHours(2), start.AddHours(3), string.Empty, null, string.Empty, 1));

Appointments.Add(new AppointmentInfo("Driving", start.AddHours(3), start.AddHours(5), string.Empty, null, string.Empty, 1));

Appointments.Add(new AppointmentInfo("Driving", start.AddHours(3), start.AddHours(5), string.Empty, null, string.Empty, 2));

Appointments.Add(new AppointmentInfo("Driving", start.AddHours(3), start.AddHours(5), string.Empty, null, string.Empty, 3));

Appointments.Add(new AppointmentInfo("Driving", start.AddHours(3), start.AddHours(5), string.Empty, null, string.Empty, 4));

Appointments.Add(new AppointmentInfo("Active", start.AddHours(6), start.AddHours(7), string.Empty, null, string.Empty, 1));

Appointments.Add(new AppointmentInfo("Active", start.AddHours(2), start.AddHours(3), string.Empty, null, string.Empty, 2));

}

protected void RadScheduler1_DataBound(object sender, EventArgs e)

{

RadScheduler1.Resources.Clear();

InitializeResources();

ResourceStyleMapping r = new ResourceStyleMapping();

r.Type= "User";

r.Key = Convert.ToString(i + 1);

r.ApplyCssClass = "rsCategoryBlue";

RadScheduler1.ResourceStyles.Add(r);

ResourceStyleMapping r1 = new ResourceStyleMapping();

r1.Type = "User";

r1.Key = Convert.ToString(i + 2);

//r.Text = "Bob";

r1.ApplyCssClass = "rsCategoryPink";

RadScheduler1.ResourceStyles.Add(r1);

i++;

int pageIndex = (int?)ViewState["PageIndex"] ?? 0;

IList<Resource> pagedResources = new List<Resource>(RadScheduler1.Resources.GetResourcesByType("User"));

IList<Resource> remainingResources = new List<Resource>();

int resourceCount = pagedResources.Count;

int pageStart = pageIndex * 2;

int pageEnd = pageStart + 2;

int resourceIndex = 0;

foreach (Resource resource in pagedResources)

{

if (resourceIndex < pageStart || resourceIndex >= pageEnd)

{

RadScheduler1.Resources.Remove(resource);

remainingResources.Add(resource);

}

resourceIndex++;

}

private const int PageSize = 2;

protected void NextPage_Click(object sender, EventArgs e)

{

int pageIndex = (int?)ViewState["PageIndex"] ?? 0;

pageIndex++;

ViewState["PageIndex"] = pageIndex;

RadScheduler1.Rebind();

}

protected void PrevPage_Click(object sender, EventArgs e)

{

int pageIndex = (int?)ViewState["PageIndex"] ?? 0;

pageIndex = Math.Max(pageIndex - 1, 0);

ViewState["PageIndex"] = pageIndex;

RadScheduler1.Rebind();

}

class

AppointmentInfo

{

private readonly string _id;

private string _subject;

private DateTime _start;

private DateTime _end;

private string _recurrenceRule;

private string _recurrenceParentId;

private string _reminder;

private int? _userID;

public string ID

{

get { return _id; }

}

public string Subject

{

get { return _subject; }

set { _subject = value; }

}

public DateTime Start

{

get { return _start; }

set { _start = value; }

}

public DateTime End

{

get { return _end; }

set { _end = value; }

}

public string RecurrenceRule

{

get { return _recurrenceRule; }

set { _recurrenceRule = value; }

}

public string RecurrenceParentID

{

get { return _recurrenceParentId; }

set { _recurrenceParentId = value; }

}

public int? UserID

{

get { return _userID; }

set { _userID = value; }

}

public string Reminder

{

get { return _reminder; }

set { _reminder = value; }

}

private AppointmentInfo()

{

_id = Guid.NewGuid().ToString();

}

public AppointmentInfo(string subject, DateTime start, DateTime end,

string recurrenceRule, string recurrenceParentID, string reminder, int? userID)

: this()

{

_subject = subject;

_start = start;

_end = end;

_recurrenceRule = recurrenceRule;

_recurrenceParentId = recurrenceParentID;

_reminder = reminder;

_userID = userID;

}

Thanks,
Preethi

answered on 03 Sep 2011, 09:58 AM

Hello Preethi,

1) Instead of using the RadScheduler.Rebind() method - use the RadScheduler.DataBind() as the Rebind wtill uses the old datasource.

2) Please take a look at this demo for "Resource Header Templates" to be able to put different colors for each header.

3) In order to put different images on appointments - you need AppointmentTemplate. Please take a look at this demo for a slution.

Regards,
Veronica Milcheva
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

answered on 05 Sep 2011, 05:11 AM

error.JPG

Hi,
Thanks for your response, I had already tried with DataBind but i get Java script runtime error.
I am attaching the screen shot. Please have a look.
Also can I do some string formatting for the Subject field. Like putting a new line constant. I tried with

new

AppointmentInfo("Tachograph /r/nDriving" + , start, start.AddMinutes(30), string.Empty, null, string.Empty, 1)); it dint work.

Regards,
Preethi Dwarkanath

answered on 05 Sep 2011, 09:36 AM

Hi Preethi,

I am not sure why you get the Javascript error unless I see your full code. Could ypu please attach your code in a .zip file and attach it in a new Support Thread as this is a Forum Post and you are not aloowed to attach .zip files. Another alternative is to use one of the sites for free online storage as 4shared.com.

As per your second question - every html that is put in a subject will be threated as a string unless you create an Appointment Template. Please take a look at this demo for an example.

All the best,
Veronica Milcheva
the Telerik team

answered on 07 Sep 2011, 01:18 PM

Hi Preethi,

I tested your sample, but I wasn't able to observe problems with it -
http://screencast.com/t/uydgFrwm2

If the all-day row's height is not sufficient to display the entire appointment's details, I suggest you use RadToolTip as in this demo.

You can set the appointment's BackColor property conditionally in AppointmentDataBound. This will have highest precedence and will overwrite any resource related styles. It will also allow you to have different appointment colors for appointments from the same resource column.

Kind regards,
Peter
the Telerik team

answered on 13 Sep 2011, 10:41 AM

Allday.JPG

HI,
Thanks a lot for your reply.
This worked, but I have 1 more query. Though I have added an All dat Appointment like:

DateTime start = DateTime.Today;

DateTime end = DateTime.Today.AddDays(1);

Appointments.Add(

new AppointmentInfo("Tachograph ; Rest 1h; Driving 2h ; Passive 2h ; Active 4h", start, end, string.Empty, null, string.Empty, 2,1));

This will fill only half the row in the All Day row. I want the entire row to be filled.Attaching the image.

Let me know.

Regards,
Preethi Dwarkanath

answered on 14 Sep 2011, 12:25 PM

Hi Preethi,

There is an empty row to allow users to double click and insert new appointments if needed. You can remove the last row with this css:

<style type="text/css">

.rsAllDayRow .rsApt, .rsAllDayRow .rsAptOut

{

height: 45px !important;

}

.rsAllDayRow

{

height: 50px !important;

}

.rsAllDayRow .rsLastSpacingWrapper

{

height: 0px !important;

}

</style>

Best wishes,
Peter
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal