Support archive

Does anyone have any example CSS for Low Events Calendar tag?

Bryan 5 Aug 2012 04:49 question, complete

I have the calendar tag working but it needs some basic CSS applied. Do any of you have any CSS examples that work with the Calendar template tag output in the site example? I am still a CSS novice so your help is appreciated. Low Events has been a great addition to our EE sites. Thank you Low!!

[code]

{exp:low_events:calendar events_field="event_dates" date="{segment_2}"}

←
{this_month format="%F %Y"}
→

{weekdays}{weekday_1}{/weekdays}

{weeks}

{days}

{if events_on_day}
{day_number}
{if:else}
{day_number}
{/if}

{/days}

{/weeks}

{/exp:low_events:calendar}

[/code]

Replies

1. Low 5 Aug 2012 09:50

   Here's what I use for my sandbox site:
   
   

   #calendar { 
     table-layout:fixed; 
     border-collapse:collapse; 
     border:1px solid #ccc; 
     margin-bottom:1.5em; 
    } 
    #calendar caption { 
     padding:2px 4px; 
    } 
    #calendar th { 
     text-align:center; 
     background:#ccc; 
     color:#555; 
     text-shadow:1px 1px 1px #fff; 
    } 
    #calendar td { 
     text-align:center; 
     color:#000; 
     padding:2px 4px; 
    } 
    #calendar tbody tr:nth-child(odd), 
    #calendar tbody td:nth-child(odd) { 
     background:rgba(0,0,0,0.075); 
    } 
    #calendar td.given { 
     font-weight:bold; 
     background:#ffc; 
    } 
    #calendar td.today { 
     color:red; 
     font-weight:bold; 
    }

   
   
   Which makes it look like this:
   
   
   Just make sure your table-element has id="calendar".