localendar Forums Homepage

Print at Dec 10, 2018, 2:55:37 PM View all posts in this thread on one page
Posted by TriangleSquares at Feb 17, 2016, 5:30:16 AM
Settings -- defaults -- Block Styles // mobile displays
Hello:

I've been trying to get my calendar to display well on phones, tablets and PCs. I've read the pages on CSS and "Making your calendar responsive." I've also tried various settings.

Question 1:
I'm confused about the defaults in the Settings area for PC/Tablet and Mobile.

There is a choice for Default (Block style) and Block Style #2.
Nowhere in the documentation can I find anything that explains what these terms mean. Is Block Style = M0, and Block Style #2 = M4?

Question 2: Trying to obtain readable display in mobile:

I've tried pasting this code in the calendar footer: <style>.view_style_M1 * {font-size:32px;}</style>

It's supposed to make the display large when viewed on a phone. But I find it makes all views large.

I want a block display in all formats -- PC, phone, tablet - not a list display. Can you provide assistance?
Thanks!

Susan C
Triangle Squares

Posted by support at Feb 21, 2016, 7:24:37 PM
Re: Settings -- defaults -- Block Styles // mobile displays
Well, this is going to be problem straight off:
"I want a block display in all formats -- PC, phone, tablet - not a list display"

You can't but 10lbs of bologna in a 5lb bag. You can force a block-display on a mobile device, but that's a small screen. Readability will be a challenge.

The calendar formats/styles are explained on this page:
http://localendar.com/docs/display/lc/Your+Calendar's+URL+and+Parameters

Regarding your use of custom CSS, I don't think you followed the example exactly.
The example instructs to make the default for Desktop viewed Block Style, and the default for Mobile viewers to be List Style. Thus, the CSS provided will only affect the view for List Style users, and only Mobile users will see that view.

 
The CSS you pasted in the last step essentially says "When the Month-list 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 the standard block-style view. But from a mobile browser, they will see the list-style view, and with a bigger font.


If you want everyone to see a Block style view, then the answer is simple: Select the Block Style view for Desktop and Mobile devices.
----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news

Posted by TriangleSquares at Feb 23, 2016, 12:32:14 PM
Re: Settings -- defaults -- Block Styles // mobile displays
Hi, Mark:

Thanks for the response.

I don't see any info about the first question I asked.
What's the difference, if any, between the settings
labelled "Default (block style)" and "Block Style #2"?

There must be something distinguishing them
from each other, since they're separate entries.
But Localendar documentation doesn't mention Block Style #2.

Thanks.

SC

Posted by OPwebmaster at Feb 24, 2016, 5:42:31 AM
Re: Settings -- defaults -- Block Styles // mobile displays
TriangleSquares:
 
Hi, Mark:

Thanks for the response.

I don't see any info about the first question I asked.
What's the difference, if any, between the settings
labelled "Default (block style)" and "Block Style #2"?

I think you are supposed to assume that the Default is =M0, and Block Style #2 =M4.

If you go here:
http://localendar.com/docs/display/lc/Your+Calendar%27s+URL+and+Parameters
you will see that the only difference is that adjacent events are combined into a single block. There is a diagram showing this.

Harry

Posted by OPwebmaster at Feb 25, 2016, 8:54:52 PM
Re: Settings -- defaults -- Block Styles // mobile displays
Marc:
 
Regarding your use of custom CSS, I don't think you followed the example exactly.

On this page:
http://localendar.com/docs/display/lc/Making+your+calendar+responsive

I cut and pasted the exact lines of custom CSS hooks from 'Different Calendar Views...' and from 'Customizing the Event...'.

The header text, and the test for each event look fine on my Android phone. But the horizontal lines that show the date of the week are so small they cannot be read. By the time the screen is zoomed so they are readable, the event text for even one simple event will not fit on the screen.

Is there a way to increase the size of the date of the week line, so it's text size is more in keeping with the 32px of the header?

Harry

Posted by support at Feb 27, 2016, 8:11:29 PM
Re: Settings -- defaults -- Block Styles // mobile displays
The weekline text should now respect the CSS you are using to increase the rest of the font size on the calendar.
----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news

Posted by OPwebmaster at Feb 29, 2016, 6:47:46 PM
Re: Settings -- defaults -- Block Styles // mobile displays
Marc:
 
The weekline text should now respect the CSS you are using to increase the rest of the font size on the calendar.

Works great. Thanks.

Is the weekline text size set by this entry:
<style>.lc_mobile_usr * {font-size:60px;}</style>

or this entry:
<style>.view_style_M1 * {font-size:32px;}</style>


Harry

Posted by support at Mar 19, 2016, 2:13:36 PM
Re: Settings -- defaults -- Block Styles // mobile displays
It depends.. For a week-view, I think it should be
<style>.view_style_W1 * {font-size:32px;}</style>

and not
<style>.view_style_M1 * {font-size:32px;}</style>


It could also be W0, depending on the default Week View you have selected.

As for .lc_mobile_usr, that class is only present if the person viewing the page is on a mobile device. So although you can set that CSS for every page, it won't have any effect unless the visitor is on a mobile.
----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news


Help! | Cobranding | Legal | Privacy Policy | About localendar.com | Contact Us