Calendar demo
Source of:
ContextMenu.aspx
<script runat="server">
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
Calendar.VisibleDays = TwoDaysCheck.Checked ? 2 : 1;
}
protected void AppointmentsContextMenu_Command(object sender, ActionEventArgs e) {
if (e.Name=="APP") {
string s;
if (Calendar.SelectedAppointment==null)
s = "SelectedAppointment==null";
else
s = "SelectedAppointment.Text==\""+HttpUtility.HtmlEncode(Calendar.SelectedAppointment.Text)+'"';
s += "<br><br>";
if (Calendar.ClickedAppointment==null)
s += "ClickedAppointment==null";
else
s += "ClickedAppointment.Text==\""+HttpUtility.HtmlEncode(Calendar.ClickedAppointment.Text)+'"';
InfoLabel.Text = s;
}
}
protected void ContextMenu_Command(object sender, ActionEventArgs e) {
if (e.Name!="") {
string s = "SelectedResource=="+Calendar.SelectedResourceIndex;
s += "<br><br>";
if (Calendar.SelectedDateTime==DateTime.MinValue)
s += "SelectedDateTime==DateTime.MinValue";
else
s += "SelectedDateTime==\""+HttpUtility.HtmlEncode(Calendar.SelectedDateTime.ToString())+'"';
InfoLabel.Text = s;
}
}
</script>
<script language="javascript" type="text/javascript">
function ApMenuObj_MenuActivate() {
for (var i = 0; i<3; ++i)
ApMenuObj.get_Items()[3+i].set_Enabled(CalendarObj.ClickedAppointment==i);
}
var infoCounter = 0;
function setInfo(s) {
var localCounter = ++infoCounter;
var info = document.getElementById("ClickInfo");
info.innerHTML = s;
setTimeout(function() {
if (localCounter==infoCounter)
info.innerHTML = "waiting for a click...";
}, 5000);
}
function bodyClick() {
if (CalendarObj.get_SelectedAppointment() == null) {
if (CalendarObj.get_SelectedResourceIndex() < 0)
setInfo('HourBar ruler was clicked: ' + CalendarObj.get_SelectedDateTime().toUTCString());
else
setInfo('BodyBar ruler was clicked: ' + CalendarObj.get_SelectedDateTime().toUTCString() +
"; Resource=" + CalendarObj.get_SelectedResourceIndex());
}
}
function dateClick() {
setInfo('DateBar was clicked: ' + CalendarObj.get_SelectedDateTime().toUTCString());
}
function resourceClick() {
setInfo('ResourceBar was clicked: ' + CalendarObj.get_SelectedDateTime().toUTCString() +
"; Resource=" + CalendarObj.get_SelectedResourceIndex());
}
function allDayClick() {
if (CalendarObj.get_SelectedAppointment() == null)
setInfo('AllDayBar was clicked: ' + CalendarObj.get_SelectedDateTime().toUTCString() +
"; Resource=" + CalendarObj.get_SelectedResourceIndex());
}
function appointmentClick(name) {
setInfo(name+' was clicked: ' + CalendarObj.get_SelectedAppointment().get_Text());
}
function showAppointmentInfo() {
var ap = CalendarObj.get_SelectedAppointment();
var info = document.getElementById("ClickInfo");
if (ap == null)
info.innerHTML = "No appointment is selected.";
else
info.innerHTML =
"Text: " + ap.get_Text() + "<br>" +
"Start: " + ap.get_Start().toUTCString() + "<br>" +
"End: " + ap.get_End().toUTCString() + "<br>" +
"AllDay: " + ap.get_AllDayEvent() + "<br>" +
"ID: " + ap.get_AppointmentId() + "<br>" +
"BusyColor: " + ap.get_BusyColor();
}
</script>
<table width="100%">
<tr>
<td valign="top">
<goc:DailyCalendar ID="Calendar" runat="server" BorderColor="Gainsboro" Font-Names="Verdana"
Font-Size="Small" Height="348px" Width="500px" FreeHourColor="DarkGray" HoursResolution="One"
LineColor="DimGray" WorkHourColor="Gainsboro" ObjectID="CalendarObj">
<HoursBarStyle BackColor="Gainsboro" Font-Names="Arial" Font-Size="X-Small" ForeColor="DimGray"
ContextMenuID="HoursContextMenu" />
<DateBarStyle Font-Bold="True" Font-Italic="False" HorizontalAlign="Center" BackColor="DarkGray"
ForeColor="Gainsboro" ContextMenuID="DateContextMenu">
<EventClick ClientScript="dateClick();" />
</DateBarStyle>
<AllDayBarStyle BackColor="DimGray" ContextMenuID="AllDayContextMenu">
<EventClick ClientScript="allDayClick();" />
</AllDayBarStyle>
<ResourceBarStyle Font-Bold="True" Font-Italic="True" HorizontalAlign="Right" BackColor="Gray"
ForeColor="Gainsboro" ContextMenuID="ResourcesContextMenu">
<EventClick ClientScript="resourceClick();" />
</ResourceBarStyle>
<BodyStyle ContextMenuID="BodyContextMenu">
<EventClick ClientScript="bodyClick();" />
</BodyStyle>
<DefaultAppointmentStyle BackColor="WhiteSmoke" ContextMenuID="AppointmentsContextMenu">
<EventClick ClientScript="appointmentClick('DefaultAppointmentBar');" />
</DefaultAppointmentStyle>
<DefaultAllDayAppointmentStyle BackColor="WhiteSmoke" ContextMenuID="AppointmentsContextMenu">
<EventClick ClientScript="appointmentClick('DefaultAllDayAppointmentBar');" />
</DefaultAllDayAppointmentStyle>
<PreviousDayButton ButtonType="Link">
<Style Font-Underline="False" ForeColor="Gainsboro" />
</PreviousDayButton>
<NextDayButton ButtonType="Link">
<Style Font-Underline="False" ForeColor="Gainsboro" />
</NextDayButton>
</goc:DailyCalendar>
</td>
<td valign="top">
An example shows how to handle mouse events and link a context menu with the calendar.
<br />
<span style="font-size: x-small">
<br />
Use the right-click on any calendar element to display the associated context menu.
When you select �Get information� item from the menu, the server prepares information
about element you have clicked on.
Notice, you can use the <i>ContextMenu.OnClientMenuActivate</i> client event for
make modification of the context menu just before displaying.
<br />
<br />
Another possibility is clicking by left mouse button. That invokes the appropriate
<i>MouseDown</i>
client event. For every calendar element is defined its own <i>MouseDown</i> handler that display
current state of calendar (<i>get_SelectedAppointment(), get_SelectedDateTime(),
get_SelectedResourceIndex()</i>).<br />
</span><br />
<asp:CheckBox ID="TwoDaysCheck" runat="server" AutoPostBack="True" Text="Show two days simultaneously" /><br />
<br />
<span style="text-decoration: underline">Server information:</span>
<br />
<asp:Label ID="InfoLabel" runat="server" ForeColor="#00C000"></asp:Label><br />
<br />
<span style="text-decoration: underline">Client event arguments:</span>
<br />
<div style="color: #00c000" id="ClickInfo">
waiting for a click...
</div>
</td>
</tr>
</table>
<go:ContextMenuBox ID="BodyContextMenu" runat="server" Font-Names="Times New Roman"
Font-Size="12pt" OnCommand="ContextMenu_Command">
<Items>
<go:MenuActionItem Text="Body Context Menu" Enabled="False">
</go:MenuActionItem>
<go:MenuSeparatorItem />
<go:MenuActionItem CommandName="INFO" Text="Get information">
</go:MenuActionItem>
<go:MenuActionItem Text="Times New Roman" Enabled="False">
</go:MenuActionItem>
<go:MenuActionItem Text="Large Font" Enabled="False">
</go:MenuActionItem>
<go:MenuActionItem Text="Menu" Enabled="False">
</go:MenuActionItem>
</Items>
<EventCommand UseCallback="False" />
</go:ContextMenuBox>
<go:ContextMenuBox ID="HoursContextMenu" runat="server" Font-Names="Times New Roman"
Font-Size="12pt" OnCommand="ContextMenu_Command">
<Items>
<go:MenuActionItem Text="Hours Context Menu" Enabled="False">
</go:MenuActionItem>
<go:MenuSeparatorItem />
<go:MenuActionItem CommandName="INFO" Text="Get information">
</go:MenuActionItem>
<go:MenuActionItem Text="Times New Roman" Enabled="False">
</go:MenuActionItem>
<go:MenuActionItem Text="Large Font" Enabled="False">
</go:MenuActionItem>
<go:MenuActionItem Text="Menu" Enabled="False">
</go:MenuActionItem>
</Items>
<EventCommand UseCallback="False" />
</go:ContextMenuBox>
<go:ContextMenuBox ID="AppointmentsContextMenu" runat="server" Font-Names="Tahoma"
Font-Size="8pt" OnCommand="AppointmentsContextMenu_Command" ObjectID="ApMenuObj">
<Items>
<go:MenuActionItem Text="Appointments Context Menu" Enabled="False">
</go:MenuActionItem>
<go:MenuSeparatorItem />
<go:MenuActionItem CommandName="APP" Text="Get information">
</go:MenuActionItem>
<go:MenuActionItem Text="Get client script information" OnClientAction="showAppointmentInfo();">
</go:MenuActionItem>
<go:MenuActionItem Text="Appointment Two">
</go:MenuActionItem>
<go:MenuActionItem Text="Appointment Three">
</go:MenuActionItem>
</Items>
<EventMenuActivate ClientScript="ApMenuObj_MenuActivate();" />
<EventCommand UseCallback="False" />
</go:ContextMenuBox>
<go:ContextMenuBox ID="DateContextMenu" runat="server" Font-Names="Tahoma" Font-Size="8pt"
OnCommand="ContextMenu_Command">
<Items>
<go:MenuActionItem Text="Date Context Menu" Enabled="False">
</go:MenuActionItem>
<go:MenuSeparatorItem />
<go:MenuActionItem CommandName="INFO" Text="Get information">
</go:MenuActionItem>
<go:MenuActionItem Text="Function One">
</go:MenuActionItem>
<go:MenuActionItem Text="Function Two">
</go:MenuActionItem>
<go:MenuActionItem Text="Function three">
</go:MenuActionItem>
</Items>
<EventCommand UseCallback="False" />
</go:ContextMenuBox>
<go:ContextMenuBox ID="ResourcesContextMenu" runat="server" Font-Names="Tahoma"
Font-Size="8pt" OnCommand="ContextMenu_Command">
<Items>
<go:MenuActionItem Text="Resources Context Menu" Enabled="False">
</go:MenuActionItem>
<go:MenuSeparatorItem />
<go:MenuActionItem CommandName="INFO" Text="Get information">
</go:MenuActionItem>
<go:MenuActionItem Text="Function One">
</go:MenuActionItem>
<go:MenuActionItem Text="Function Two">
</go:MenuActionItem>
<go:MenuActionItem Text="Function three">
</go:MenuActionItem>
</Items>
<EventCommand UseCallback="False" />
</go:ContextMenuBox>
<go:ContextMenuBox ID="AllDayContextMenu" runat="server" Font-Names="Tahoma" Font-Size="8pt"
OnCommand="ContextMenu_Command">
<Items>
<go:MenuActionItem Text="All Day Context Menu" Enabled="False">
</go:MenuActionItem>
<go:MenuSeparatorItem />
<go:MenuActionItem CommandName="INFO" Text="Get information">
</go:MenuActionItem>
<go:MenuActionItem Text="Function One">
</go:MenuActionItem>
<go:MenuActionItem Text="Function Two">
</go:MenuActionItem>
<go:MenuActionItem Text="Function three">
</go:MenuActionItem>
</Items>
<EventCommand UseCallback="False" />
</go:ContextMenuBox>