Skip to Content

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

 

 

 

 

 

 

 

 

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Former Member

    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.

    (0) 

Leave a Reply