Create Calendar View (Day, Weekly and Monthly) in CRM Web UI

Requirement: To display appointments in calendar based on the reference date.

Step 1: Go to Transaction ‘BSP_WD_CMPWB’ and Create a Component.

Step 2: Provide Window Name and press enter.

Step 3: Create a view.

Step 4: Give View Name and press continue.

Step 5: Select View type as Empty View.

Step 6: Go to Runtime Repository Editor and Right click on the Main Window to add the view.

Step 7: Assign View ‘Calendar‘ to MainWindow and press enter.

Step 8: Go to View Structure tab of Calendar view and Double click on ‘Calendar.htm‘ as shown below.

Step 9: Create an attribute for appointments in Page Attributes tab.

Step 10: Add the code for Day Calendar in Layout tab.
Save and activate the page.

Logic for Day Calendar:

<%@page language=”abap” %>
<%@extension name=”bsp” prefix=”bsp” %>
<%@extension name=”thtmlb” prefix=”thtmlb” %>
<%@extension name=”chtmlb” prefix=”chtmlb” %>
<%
data: ls_appointment TYPE bsp_xpt_appointment.
data lv_reference_date TYPE D.
lv_reference_date = sy-datum.
ls_appointment-appo_begin = ‘20161124051010’.
ls_appointment-appo_end = ‘20161124062010’.
ls_appointment-description1 = ‘1st appointment’.
ls_appointment-clickable = ‘X’.
APPEND ls_appointment TO gt_appointment.
ls_appointment-appo_begin = ‘20161124091010’.
ls_appointment-appo_end = ‘20161124091910’.
ls_appointment-description1 = ‘2nd appointment’.
ls_appointment-clickable = ‘X’.
APPEND ls_appointment TO gt_appointment.
ls_appointment-appo_begin = ‘20161124121010’.
ls_appointment-appo_end = ‘20161124131010’.
ls_appointment-description1 = ‘3rd appointment’.
ls_appointment-clickable = ‘X’.
APPEND ls_appointment TO gt_appointment.
%>
<thtmlb:grid cellSpacing = “1”
columnSize = “8”
height = “20%”
rowSize = “1”
width = “50%” >
<thtmlb:gridCell colSpan = “8”
columnIndex = “1”
horizontalAlignment = “LEFT”
rowIndex = “1” >
<chtmlb:calendar_daily appointments = “<%= GT_APPOINTMENT %>”
id = “mv”
reference_date = “<%= LV_REFERENCE_DATE %>”
tzone = “UTC+53” />
</thtmlb:gridCell>
</thtmlb:grid>

Step 10: Execute the component.

Output:

Weekly Calendar:

Logic for Weekly Calendar:

<%@page language=”abap” %>
<%@extension name=”bsp” prefix=”bsp” %>
<%@extension name=”thtmlb” prefix=”thtmlb” %>
<%@extension name=”chtmlb” prefix=”chtmlb” %>
<%
data: ls_appointment type BSP_XPT_APPOINTMENT.
data lv_reference_date TYPE D.
lv_reference_date = sy-datum.
ls_appointment-appo_begin = ‘20161122051010’.
ls_appointment-appo_end = ‘20161122062010’.
ls_appointment-description1 = ‘1st appointment’.
ls_appointment-clickable = ‘X’.
APPEND ls_appointment TO gt_appointment.
ls_appointment-appo_begin = ‘20161122091010’.
ls_appointment-appo_end = ‘20161122091910’.
ls_appointment-description1 = ‘2nd appointment’.
ls_appointment-clickable = ‘X’.
APPEND ls_appointment TO gt_appointment.
ls_appointment-appo_begin = ‘20161124121010’.
ls_appointment-appo_end = ‘20161124131010’.
ls_appointment-description1 = ‘3rd appointment’.
ls_appointment-clickable = ‘X’.
APPEND ls_appointment TO gt_appointment.
%>
<thtmlb:grid cellSpacing = “1”
columnSize = “8”
height = “20%”
rowSize = “1”
width = “50%” >
<thtmlb:gridCell colSpan = “8”
columnIndex = “1”
horizontalAlignment = “LEFT”
rowIndex = “1” >
<chtmlb:calendar_weekly appointments = “<%= GT_APPOINTMENT %>”
id = “mv”
reference_date = “<%= LV_REFERENCE_DATE %>”
tzone = “UTC+53” />
</thtmlb:gridCell>
</thtmlb:grid>

Output:

Monthly Calendar:

Logic for Monthly Calendar:

<%@page language=”abap” %>
<%@extension name=”bsp” prefix=”bsp” %>
<%@extension name=”thtmlb” prefix=”thtmlb” %>
<%@extension name=”chtmlb” prefix=”chtmlb” %>
<%
data: ls_appointment type BSP_XPT_APPOINTMENT.
data lv_reference_date TYPE D.
lv_reference_date = sy-datum.
ls_appointment-appo_begin = ‘20161102051010’.
ls_appointment-appo_end = ‘20161102062010’.
ls_appointment-description1 = ‘1st appointment’.
ls_appointment-clickable = ‘X’.
APPEND ls_appointment TO gt_appointment.
ls_appointment-appo_begin = ‘20161110091010’.
ls_appointment-appo_end = ‘20161110091910’.
ls_appointment-description1 = ‘2nd appointment’.
ls_appointment-clickable = ‘X’.
APPEND ls_appointment TO gt_appointment.
ls_appointment-appo_begin = ‘20161122121010’.
ls_appointment-appo_end = ‘20161122131010’.
ls_appointment-description1 = ‘3rd appointment’.
ls_appointment-clickable = ‘X’.
APPEND ls_appointment TO gt_appointment.
%>
<thtmlb:grid cellSpacing = “1”
columnSize = “8”
height = “20%”
rowSize = “1”
width = “100%” >
<thtmlb:gridCell colSpan = “8”
columnIndex = “1”
horizontalAlignment = “LEFT”
rowIndex = “1” >
<chtmlb:calendar_monthly appointments = “<%= GT_APPOINTMENT %>”
id = “mv”
reference_date = “<%= LV_REFERENCE_DATE %>”
tzone = “UTC+53”
scrollbar = “TRUE”
/>
</thtmlb:gridCell>
</thtmlb:grid>

Output:

Thank you,
Mani