Calendar Widget All Day Events

[Kevin_Martin]

To be completed by the original poster:

CMS Version

Version 3.0.0

Player Type

Windows

Player Version

3 R301.1

Issue

When using the Calendar widget, I have some events that will be for a certain amount of time (like 1 hour) that I would like to show a start time for, but then for the all day events, I’d like to show it as “All Day” rather than the start time at 12:00 am. Is there a way to differentiate between the two?

[wires]

I was able to do something similar by using parts of the date data in the HTML markup in the template. You could probably write some javascript to do it, but just using the template and CSS, it will be a lot more simple. See the calendar manual for specific info on what all the letters mean and how to display only parts of the event times: Xibo Documentation.

Here is an example of what I use in the main template:

<div class="eContainer">
<p class="eTitle">[Summary]</p>
<p class="eDate">[StartDate|M d]<span class="allDay[StartDate|H]"> @ [StartDate|g:i A]</span></p>
</div>

In the optional stylesheet, I have a CSS style like this:

.allDay00{display:none;}

If the start time hour is 00 (which equals 12 am), the span will not display.

Your solution would need to be a bit different. You would need 2 span tags with multiple classes.

<span class="theStartTime allDay[StartDate|H]"> @ [StartDate|g:i A]</span>
<span class="theAllDay allDay[StartDate|H]"> All Day Event</span>

Your CSS would need something like this.

.allDay00 {display:none;} /*This will hide both by default*/
.theStartTime.allDay00 {display:none;} /*hides start time is 12 am*/
.theAllDay.allDay00 {display:inline;} /*Displays all day text if start time is 12 am*/

I might have missed something along the way, but I think that might cover what you’re trying to do.

Good luck!

[Kevin_Martin]

First of all, thank you, thank you, THANK YOU! I really appreciate such a thorough response. Now let me say that I’m pretty CSS illiterate.

You’ve gotten me almost all the way there, but for some reason, even on events that don’t have a 12 am start time, it’s still showing the “All Day Event”, and I can’t figure out why. Here is what I have for my code. Any advice?

Main Template:

<div class="eContainer">
<p class="eDate"> <span style="color:#ffffff;font-size:36px;">[StartDate|F j, Y]</span>
<span class="theStartTime allDay[StartDate|H]" style="color:#ffffff;font-size:36px;"> - [StartDate|g:i A]</span>
<span class="theAllDay allDay[StartDate|H]" style="color:#ffffff;font-size:36px;"> - All Day Event Stuff</span></p>
<p class="eTitle"><span style="color:#ffffff;font-size:24px;">[Summary]</span></p>
</div>
<hr>

Optional Stylesheet:

.allDay00 {display:none;} /*This will hide both by default*/
.theStartTime.allDay00 {display:none;} /*hides start time is 12 am*/
.theAllDay.allDay00 {display:inline;} /*Displays all day text if start time is 12 am*/

Thanks again for your help!

[Kevin_Martin]

Actually, I leaned on my brother who knows a thing or two about CSS, and he was able to help me get it straightened out. For anyone else ever trying to do something similar, here’s the final code that got it working. This calendar is displaying 5 objects on a region that’s 772px high and 653px wide:

Main Template:

<div class="eContainer" style="height:140px;">
<p class="eDate"> 
   [StartDate|F j, Y]
   <span class="show timeHide[StartDate|H]"> - [StartDate|g:i A]</span>
   <span class="hide allDayDisplay[StartDate|H]"> - All Day Event</span>
</p>
<span class="eTitle">[Summary]</span>
</div>
<hr>

Optional Stylesheet:

.hide {display:none;}
.show {display:inline;}
.timeHide00 {display:none;} /*hides start time is 12 am*/
.allDayDisplay00 {display:inline;} /*Displays all day text if start time is 12 am*/
.eDate {
	color:#ffffff;
	font-size:36px;
	}
.eTitle {
	color:#ffffff;
	font-size:24px;
	}

Thanks again for helping me get this going!