Message-ID: <1572125536.729.1711713174366.JavaMail.ELSIE-CT-VM$@elsie-ct-vm> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_728_1113861898.1711713174366" ------=_Part_728_1113861898.1711713174366 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html Making your calendar responsive

Making your calendar responsive

In today's world people aren't just accessing the web from a des= ktop browser. Some will use tablets, others phones, and probably other devi= ces with different screen sizes (cars? watches? glasses?)
Creating a "responsive" website means the display of your content is readable o= n as many devices as possible, without requiring any specific action on the= part of the person viewing the content.

There are many different frameworks and techniques for building a respon= sive website. Some website creation tools even handle responsive design aut= omatically, so you don't even need to think about it!

But what happens when you publish your calendar? Is a localendar calenda= r responsive?

Calendar Size

Your calendar will automatically size itself to fill whatever container = surrounds it. If you are linking to the full-screen view of your calendar, = then the calendar will fill the entire screen, whatever size it is. If you = are using an interactive embedded calendar, and place the calendar HTML ins= ide a fixed or flexibly-sized <div>, then the calendar will constrain= itself to that <div>'s size.

Font Size

By default, the calendar's font size will not change automatically. This may present a readabili= ty challenge on mobile devices, where a larger font may be preferred on a s= maller-sized screen. There is a solution in the section below.

Different Calendar Views for Different Devices

Under Options->General, you can select a default view for Desktop/Tab= let devices and a default view for Mobile devices. Combined with localendar= 's Custom CSS Hooks, t= his feature can make your calendar responsive for mobile devices.
Here = is an example:

  1. Open the Options->General page
  2. Select "Default" for the Desktop/Tablet month display style
  3. Select "List Style" for the Mobile Devices month display
  4. In the Calendar Footer field, paste this HTML:

    =20
    <sty=
    le>.view_style_M1 * {font-size:32px;}</style>
    =20

The CSS you pasted in the last step essentially says "When the Month-lis= t style (M1) is being shown, make the font size really big".
Now, when= a user views your calendar from a Desktop/Tablet browser, they will see th= e standard block-style view. But from a mobile browser, they will see the l= ist-style view, and with a bigger font.

Customizing the Event Detail pop-up for mobile devices

The CSS class .lc_mobile_usr is automatically added to = the Event Detail <body> tag when an event is being viewed from a mobi= le device.
Here are sample instructions if you would like to increase t= he font size (or change other attributes) for mobile users viewing an event= :

  1. Open the Options->Events page
  2. In the "Common Event Information" field, paste this HTML:

    =20
    <sty=
    le>.lc_mobile_usr * {font-size:60px;}</style>
    =20
------=_Part_728_1113861898.1711713174366--