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 mini calendar. We suggest using this one only when the details page is enabled but delete record on calendar is not enabled. This is due to the fact that each action turns into a dot on the mini calendar, and it will be difficult to tell which dot is for details and which is for delete.  Also if you enable details page, use the default action link instead of specific data field.

Using this option requires your Record Action such as the details link to not include an icon. If it does, either use Responsive Calendar to List or disable Image Actions in the Style.

responsive_design_1

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-mini * {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

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

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

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

   #calendar-mini table[data-cb-name^="cbTable"] th { 
      max-width: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 8px 6px !important;
    }

    #calendar-mini table[data-cb-name^="cbTable"] td  { 
      max-width: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center !important;
      min-height: 40px;
    }

    #calendar-mini table[data-cb-name^="cbTable"] td > div:first-child { 
      text-align: center !important;
    }      

    #calendar-mini table[data-cb-name^="cbTable"] td > div > div { 
      display: none;
    }      

    #calendar-mini table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"], 
    #calendar-mini table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"]:hover { 
      vertical-align: middle !important;
      white-space: normal !important;
      background: transparent !important;
      padding: 0px !important;
      overflow: hidden !important;
      display: inline-block !important;
      margin: 0px !important;
      line-height: 0px;
      position: static !important;
      width: auto !important;
    }

    #calendar-mini table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"] a, 
    #calendar-mini table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"]:hover a { 
      background: #006699 !important;
      color: #006699 !important;
      font-size: 1px !important;
      text-align: center !important;
      text-decoration: none !important;
      display: inline-block !important;
      line-height: 9px !important;
      height: 9px !important;
      width: 9px !important;
      border-radius: 5px !important;
      margin: 0px auto !important;
    }

    #calendar-mini table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"] span {
      display: none !important;
    }

}
</style>
<div id="calendar-mini">
<!-- Responsive Code End -->

Copy the following code and paste it into the footer:

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