how can i set selection of multiple weeks in webmonthcalendar on page load

115

micheal posted over 14 years ago

i wanted to use this calendar to show a schedule of days that are reserved on a calendar. they will have multiple weeks from different months and just need to highlight the days to show they are already reserved. is there a way to do this on the page load event on my page or another control that i should use to accomplish what i need?

24497

[Infragistics] Viktor Snezhko posted over 14 years ago in reply to micheal

Hi Mike,

On server you can modify text which appears in day. If you need more, then the only option is to process ClientEvents.RenderDay and get full access to logic which renders days and modify them as you wish. Below are examples:

aspx.cs (modify Text):

    CalendarCustomDay day = new CalendarCustomDay(date);
    // the {0} is a flag to repace default text (day of month)
    // Note: if context is too large, then it will break appearance
    day.Text = "{0}x";
    // you also may modify html of day
    day.Text = "{0}<span style='font-size:7px;color:red;'> ok</span>";

aspx (modify rendering):

<script type="text/javascript">
function renderDayEvent(sender, evntArgs)
{
var day = evntArgs.get_day();
var td = day.get_element();
var myCustomDay = td.className.indexOf('customCss') >= 0;
var title = '';
if(myCustomDay)
{
  title = 'This is my custom day:' + day.get_month() + '/' + day.get_day() + '/' + day.get_year();
}
td.title = title;
}
</script>
<ig:WebMonthCalendar ID="WebMonthCalendar1" runat="server">
<ClientEvents RenderDay="renderDayEvent" />
</ig:WebMonthCalendar>
Cancel
Reply

Cancel
115

micheal posted over 14 years ago in reply to [Infragistics] Viktor Snezhko

Can you add a description to that day as well so it will show up?
Cancel
Reply

Cancel
24497

[Infragistics] Viktor Snezhko posted over 14 years ago

Hi Mike,

The WebMonthCalendar has property CustomDays. That allows to add special days to calendar which can be rendered with special styles. Below is example:

aspx:

<head runat="server">
    <style type="text/css">
    .customCss
    {
       font-weight:bold;
    background-color:#E0E0E0;
    }
    </style>
</head>
...
<ig:WebMonthCalendar ID="WebMonthCalendar1" runat="server"></ig:WebMonthCalendar>

aspx.cs:

protected void Page_Load (System.Object sender, System.EventArgs e)
{
   if(!this.IsPostBack)
    this.AddCustomDays();
}
private void AddCustomDays()
{
   this.WebMonthCalendar1.CustomDays.Clear();
   DateTime[] weeks = new DateTime[]{new DateTime(2010, 6, 13), new DateTime(2010, 6, 27), new DateTime(2010, 7, 4), new DateTime(2010, 8, 1), new DateTime(2010, 8, 15)};
   for(int i = 0; i < weeks.Length; i++)
    this.AddCustomWeek(weeks[i]);
}
private void AddCustomWeek(DateTime date)
{
   for(int i = 0; i < 7; i++)
   {
    CalendarCustomDay day = new CalendarCustomDay(date);
    day.CssClass = "customCss";
    this.WebMonthCalendar1.CustomDays.Add(day);
    date = date.AddDays(1);
   }
}
Cancel
Reply

Cancel