How to Implement Outlook Style Calendar View Using EventCalendar.ctrl

How to Implement Outlook Style Calendar View Using EventCalendar.ctrl

Create a grid function with the following fields.

  • Event Id (Column Heading=Event Id)
  • StartDate (Column Heading=Start Date)
  • StartTime (Column Heading=Start Time)
  • EndTime (Column Heading=End Time)
  • Event Description (Column Heading=Summary)
  • ViewType (Visible=No)
  • EventType (Column Heading=Event Type)

  • Calendar View


  • CalendarEndTime


  • CalendarStartTime


  • DateInterval


  • DateIntervalSteps


  • Event Description


  • Event Id


  • GridControlName


  • ViewType


  • EventType


Grid Function Setup
  1. Create a source code object with the name "setView"


  2. Add DateISO in the DetailP region.
  3. Change the property Control Name of the grid to the following.

    <gridctrlname>:template=EventCalendar:EventId=Event Id:StartDate=Start Date:StartTime=Start Time:EndDate=End Date:EndTime=End Time:EventDesc=Summary



  4. Create buttons and events to define the standard functionality for the EventCalendar.ctrl.
    -Button <<Prev. is mapped to logical event Previous.
    -Button Next >> is mapped to logical event Next.
    -Button Day is mapped to logical event Day.
    -Button Today is mapped to logical event Today.
    -Button 4 Days is mapped to logical event 4Days.
    -Button Week is mapped to logical event Week.
    -Button Month is mapped to logical event Month.
    -Button 6 Month is mapped to logical event 6Month.

  5. Add event calendar CSS class.





Runtime Screenshots















    • Related Articles

    • How to implement file viewer in WebClient using Office Web Viewer

      Reference https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/ How to implement the FileViewer.ctrl The FileViewer.ctrl template is applied over an edit control in your Plex panel, at ...
    • Object Style

      Object Style: This document will cover the basics of the CM EvolveIT Object Management-Object Style. There will be a discussion of how we use the Object Style functionality to. After completing this document, you should have a basic understanding of ...
    • How to Implement Image Gallery

      In this article, we will be showing an example how we can use other Javascript library other than Dojo Toolkit in WebClient and how to implement an image gallery using https://galleriajs.github.io/ 1. Create a Plex grid function where one of the grid ...
    • Resizable Panels Using Fixed Positioning

      Introduction WebClient includes a feature called FixedPositioning that can be used to make panel functions auto resizable according to the user’s screen. This works by using the values of Fix, Size and Position properties of each control in the ...
    • Implementing Chart.ctrl

      WebClient supports displaying data in several basic charts based on the C3 and D3 JavaScript libraries. Chart.ctrl now allows you to display your data in pie, donut, line, bar, and spline chart formats. The grid should have exactly two columns ...