Calendar in the WebScheduler is tightly integrated, in the layout, functionality and behavior aspects, but it is actually a sub-component that is built upon loosely-coupled architecture, which can be easily taken out and even used independently.

In this topic, you will learn how to use calendar in custom container.

To use calendar in custom container

1. Drag WebPaneManager control and create 2 panes which are Left and Right.
2. Right-click on the Left pane and choose Edit Template >> Content.
3. Drag WebScheduler control into the content template.
4. Bind WebScheduler to Access database using ISDataSource control.
5. Right-click on the pane and choose End Template Editing.
6. On the Right pane, create a Div container (dvCalendarContainer) inside the content template.
   

   <ISWebDesktop:WebPane Name="Right" Text="Calendar" Width="Custom" WidthValue="170px">
      <ContentTemplate>
         <div id="dvCalendarContainer" style="height: 100%; width: 100%">
         </div>
      </ContentTemplate>
   </ISWebDesktop:WebPane>

7. Right-click on WebScheduler control and choose Properties.
8. Expand CalendarSettings. Set CustomContainerID to dvCalendarContainer and NumberOfMonthDisplayed to 2.
9. Run the project.