Plugin, beproefd en in gebruik (check feb 2019)

Events manager 2 (vervolg van 1)

mooi datumblokje

      <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>      

CSS:

  .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}  

  [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]  

CSS:

  /* 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;      }  	  	    
[collapse]
nu met categorie icoontje rechts

    <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>    
  /* 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 }  
[collapse]
opslaan in google agenda en ical

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