If you have come to this page directly, please start with the Overview page for some important information.

We have two options for calendars. This one turns a full-size calendar into a list. Open the DataPage in Edit mode and go to calendar field configuration screen. If the calendar doesn’t currently have a header/footer, insert them into your DataPage, otherwise the code goes to the bottom of the current content of your header/footer.

The HTML Editor (WYSIWYG toolbar) should not be enabled. If it is enabled, go to the Advanced tab of the header/footer and disable it. If the Advanced tab is not visible, go to the beginning steps of your DataPage and enable Advanced options.

Note that if your calendar DataPage also includes a search form or a details page, you must follow the responsive steps for Forms for those two screens. The steps on this page are only for the calendar screen.

Copy the code below and paste it into the header:

<!-- Responsive Code Begin -->
<style>
@media (max-width: 768px) { 

  #calendar-list * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  #calendar-list *:before,
  #calendar-list *:after {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
  }

  #calendar-list table[id^="PageActionsCtnr"] {
    border-spacing: 0px !important;
    border-collapse: separate !important; 
  }

  #calendar-list table[id^="PageActionsCtnr"] td {
    display: block;
    width: auto!important;
    float: left;
    text-align: left;
    padding: 1px !important;
  }

  #calendar-list table[id^="PageActionsCtnr"] td div {
    text-align: left !important;
  }

  #calendar-list table[data-cb-name^="cbTable"] { 
    background: transparent !important;
  }

  #calendar-list table[data-cb-name^="cbTable"] th {
    display: block !important;
    position: absolute !important;
    top: -9999px;
    left: -9999px;
  }

  #calendar-list table[data-cb-name^="cbTable"] td  { 
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding: 6px 6px 6px 44px !important;
    border-style: solid !important;
    border-width: 1px 0px 0px !important;
    border-color: #e9e9e9 !important;  
    min-height: 60px !important;
  }

  #calendar-list table[data-cb-name^="cbTable"] td:hover  { 
    border-style: solid !important;
    border-width: 1px 0px 0px !important;
    border-color: #e9e9e9 !important;  
  }

  #calendar-list table[data-cb-name^="cbTable"] td > div:first-child  {
    text-align: left !important;
    padding: 0px !important;
    font-size: 19px !important;
    font-weight: bold !important;
    width: 42px !important;
    display: inline-block !important; 
    position: absolute !important;
    left: 10px !important;
    top: 8px !important;
  }

  #calendar-list table[data-cb-name^="cbTable"] td > div:first-child:before {
    font-size: 10px;  
    font-weight: bold;
    text-transform: uppercase;
    display: block;
  }

  #calendar-list table[data-cb-name^="cbTable"] td:nth-of-type(1) > div:first-child:before { content: "Sun "; }
  #calendar-list table[data-cb-name^="cbTable"] td:nth-of-type(2) > div:first-child:before { content: "Mon "; }
  #calendar-list table[data-cb-name^="cbTable"] td:nth-of-type(3) > div:first-child:before { content: "Tue "; }
  #calendar-list table[data-cb-name^="cbTable"] td:nth-of-type(4) > div:first-child:before { content: "Wed "; }
  #calendar-list table[data-cb-name^="cbTable"] td:nth-of-type(5) > div:first-child:before { content: "Thu "; }
  #calendar-list table[data-cb-name^="cbTable"] td:nth-of-type(6) > div:first-child:before { content: "Fri "; }
  #calendar-list table[data-cb-name^="cbTable"] td:nth-of-type(7) > div:first-child:before { content: "Sat "; } 

  #calendar-list table[data-cb-name^="cbTable"] td > div > div  { 
    padding: 0px 3px 7px !important;
  }

  #calendar-list table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"], 
  #calendar-list table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"]:hover { 
    display: inline-block !important;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    background: transparent !important;
    padding: 0px 0px !important;
    margin: -4px 0px 8px 3px !important; 
    position: static !important;
    width: auto !important;
    opacity: 1.0 !important;
  }

}
</style>

<div id="calendar-list">

<!-- Responsive Code End -->

Customization:

There are seven lines that contain the names of the days of the week such as “Sun”, “Mon”, etc. assuming the standard calendar view where Sunday is the first column. If you use different localization where, for example, Monday is the first day of the week, you need to replace the names in the order they appear.

Lastly, copy the code below and paste it into the footer:

<!-- Responsive Code Begin -->
</div>
<!-- Responsive Code End -->