Plugin, beproefd en in gebruik (check feb 2019)

Events manager 2 (vervolg van 1)

mooi datumblokje

[code]

<div class=”evenementenlijst”>

[events_list_grouped mode=”monthly” category=38 date_format=”F Y”]

<div class=”box”>

<div class=”datumvoluit”>#l,&nbsp;#_{j} #_{M}
#H:#i -#@H:#@i</div>

<div class=”eventblokjeonder”>#_LOCATIONLINK
#_CATEGORYNAME: #_EVENTLINK</div>

</div>

[/events_list_grouped]</div>

[/code]

CSS:

[code] .box { border:3px solid green;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 10px 0px;
text-align: left; color:#000;
}
.box .datumvoluit {color:#fff;background-color:green; padding-left:10px!important }
.box .eventblokjeonder { padding-left:10px!important; color:green; font-weight:700 }
.box .eventblokjeonder {color:blue!important}
[/code]

[code] [events_list_grouped mode=”monthly” date_format=”F Y”]

<div id=”alles”>

<div id=”links”>

<div class=”datebox”>

<div class=”datumvoluit”>#l</div>

<div class=”day”>#_{d}</div>

</div>

</div>

<div id=”rechts”>

<h1>#_EVENTLINK</h1>

#_LOCATIONNAME | #H:#i-#@H:#@i | #_EVENTPRICERANGE |<a href=”#_EVENTURL”> aanmelden</a>
<a href=”#_EVENTGCALURL”>Overnemen in Google Agenda</a> | <a href=”#_EVENTICALURL”>Opslaan in ical</a></div>

</div>

<hr />

<div style=”clear: both;”></div>

</div>

[/events_list_grouped] [/code]

CSS:

[code] /* databoxen op de overzichtspagina’s*/
.datebox {
width: 75px;
height: 60px;
/*background: purple;*/border:2px solid black;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.datebox .datumvoluit {text-align: center;color:#fff;background-color:purple; font-size:13px }
.datebox .day {
margin: 0 10px;
padding-top: 5px;
background: #fff;
font-size: 22px;
font-weight: 700;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;color:#000;
}

[/code]
nu met categorie icoontje rechts

[code]

<h1>Wat is er te doen?</h1>

<div class=”evenementenlijst”>
[events_list date_format=”F Y” limit=”3″]

<div class=”box” style=”border: 3px solid #_CATEGORYCOLOR;”>

<div class=”datumvoluit” style=”background-color: #_categorycolor;”>#l, #_{j} #_{M}: #H:#i -#@H:#@i</div>

<div class=”eventblokjeonder”>

<div style=”float: right;”>#_CATEGORYIMAGE</div>

#_LOCATIONNAME
<span style=”color: #_categorycolor;”> #_CATEGORYNAME</span>: #_EVENTLINK</div>

</div>

[/events_list]</div>

[/code] [code] /* layout lijst in zijbalk */
.evenementenlijst h2{color:#e09900; text-align:center}
.evenementenlijst p {padding-bottom:0px}
.evenementenlijst a {color:blue}
.box { border:3px solid green;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0px 0px 0px 0px;
text-align: left;
}
.box .datumvoluit {color:#fff;background-color:green; padding-left:10px!important }
.box .eventblokjeonder { padding-left:10px!important; font-weight:700 }
[/code]
opslaan in google agenda en ical

[code] <a href=”#_EVENTGCALURL”>+ Google Agenda</a> <a href=”#_EVENTICALURL”>+ Ical</a><hr> [/code]

Vergelijkbaar: