Skip to Content
Author's profile photo Naramani Siddu

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

 

 

 

 

 

 

 

 

Assigned tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Christian Drumm
      Christian Drumm

      Hi Mani,

      why would I want to do this instead of using the calender functionality available in SAP CRM?

      Christian
       

      Author's profile photo Udaya Bhaskar Perecharla
      Udaya Bhaskar Perecharla

      Thanks Mani. This info is very helpful. This guidance will help us to create calendar view for other document types( Opportunity,..) that do not have c.view in standard.