[Solved] Outlook Example - DatePicker highlight bookings

[JK]

Hi,

EDIT: Sorry I put in datepicker on topic title when I meant Calendar.

Not sure how to do this,  it would be fantastic if I could get the 3 calendars on the left hand side of the demo to highlight if a appointment has been made.

I.e. if there was an appointment on the 4th June the calendars to the side would highlight to illustrate there is a appointment on that day.

I have been looking at the "special days" option in the calendar but I am unsure how to modify it to work in the fashion described above.

The scheduler is refereing to a SQL database and therfore the calendar would also need to refer to the same source.

Has anyone done this or can help?

Thanks in advance....

[Peter]

Hi JK,

Thank you for this question. You are on the right track to use RadCalendars special days collection. Here is one possible solution you can try:

protected void RadScheduler1_AppointmentDataBound(object sender, SchedulerEventArgs e)
        {
            RadCalendarDay radCalendarDay = new RadCalendarDay(this.RadCalendar1);
            radCalendarDay.Date = e.Appointment.Start;
            radCalendarDay.ItemStyle.CssClass = "DayWithAppointments";
            RadCalendar1.SpecialDays.Add(radCalendarDay);
            RadCalendar2.SpecialDays.Add(radCalendarDay);
            RadCalendar3.SpecialDays.Add(radCalendarDay);
        }
        protected void RadScheduler1_AppointmentDelete(object sender, SchedulerCancelEventArgs e)
        {
            RadCalendar1.SpecialDays.Clear();
            RadCalendar2.SpecialDays.Clear();
            RadCalendar3.SpecialDays.Clear();
        }
        protected void RadScheduler1_AppointmentUpdate(object sender, AppointmentUpdateEventArgs e)
        {
            RadCalendar1.SpecialDays.Clear();
            RadCalendar2.SpecialDays.Clear();
            RadCalendar3.SpecialDays.Clear();
        }

td.DayWithAppointments,
    td.DayWithAppointments a
    {
        background-color: orange;
    }
    .TableLayout_Office2007 td.DayWithAppointments a
    {
        border-color: orange;
    }

We will add this functinality to our online example as well.

Thanks.


Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[JK]

Hi Peter,

Due to the amount of scheduler appointments being stored, I am concerned about speed.  Therefore, I have coded my page to only display the next 7 days worth of appointments based on the calendar date that is selected.

With this approach I will not be able to use the radscheduler to highlight the calendar.  Is there a way to use another SQL script to perform the same action i.e.

select ID, Date from tblAppointments where date between @Calendar1SelectedDate and dateadd(month,3,@Calendar1SelectedDate)

The above script would interogate the appointments table and only return the next 3 months worth of appointment dates (using the calendar1's selection changed event) which would then be used as the basis of the special days option.

I think this will work, but unsure how I would "map" the seperate SQL script to the calendars, can you provide any ideas please?

Thanks,

JK

[JK]

WOW,

this is very good.  I had a late spark of inspiration, and got it to work.  I created a new procedure to fire when the selected date is changed.  Here is the code if it will help anytone else in the future...

 private void ShowBookings(DateTime thedate)
        {
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["National"].ConnectionString);
            conn.Open();
            SqlCommand comm = new SqlCommand("SPUShowTheBookings", conn);
            comm.CommandType = CommandType.StoredProcedure;
            comm.Parameters.Add("@Startdate", System.Data.SqlDbType.DateTime).Value = thedate;

            SqlDataReader dr = comm.ExecuteReader();
            while (dr.Read())
            {

                Telerik.Web.UI.RadCalendarDay radCalendarDay = new Telerik.Web.UI.RadCalendarDay(this.RadCalendar1);
                radCalendarDay.Date = DateTime.Parse( dr[0].ToString());
                radCalendarDay.ItemStyle.CssClass = "DayWithAppointments";
                RadCalendar1.SpecialDays.Add(radCalendarDay);
                RadCalendar2.SpecialDays.Add(radCalendarDay);
                RadCalendar3.SpecialDays.Add(radCalendarDay);

            }
        }

I then added the style info to my stylesheet and hey presto it works like a dream.  Thanks this is seriously good!

Regards,

JK

[Peter]

Hi JK,

I am glad that you were able to get this working as you desired. Also, thank you for your feedback and posting your modified version of the code here.

Kind regards,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center