Erstmal das CSS

Folgenden Code finden wir also in einem passend positioniertem VTL-Include

<style>
	.CalenderContainer
	{
	    padding: 0;
	    outline: 0;
	    text-align: left;
	    width: 307.875px;
	    min-width: 307.875px;
	    max-width: 307.875px;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    display: inline-block;
	    display: -ms-flexbox;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-flex-wrap: wrap;
	    flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	    -ms-flex-pack: justify;
	    -webkit-justify-content: space-around;
	    justify-content: space-around;
	    -webkit-transform: translateZ(0);
	    transform: translateZ(0);
	    opacity: 1;
	    margin: 0 auto;
	}
	.DayContainer
	{
	    background: none;
	    border: 1px solid transparent;
	    border-radius: 150px;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    color: #ccc;
	    font-weight: 400;
	    width: 14.2857143%;
	    -webkit-flex-basis: 14.2857143%;
	    -ms-flex-preferred-size: 14.2857143%;
	    flex-basis: 14.2857143%;
	    max-width: 39px;
	    height: 39px;
	    line-height: 39px;
	    margin: 5px 0px;
	    display: inline-block;
	    position: relative;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    text-align: center;
	}
	.WeekdayContainer
	{
	    background: none;
	    border: 1px solid transparent;
	    border-radius: 150px;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    color: #000;
	    font-weight: 400;
	    width: 14.2857143%;
	    -webkit-flex-basis: 14.2857143%;
	    -ms-flex-preferred-size: 14.2857143%;
	    flex-basis: 14.2857143%;
	    max-width: 39px;
	    height: 20px;
	    line-height: 39px;
	    margin: 5px 0px;
	    display: inline-block;
	    position: relative;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    text-align: center;
	}
	.selected
	{
	     background: #569ff7;
    	     -webkit-box-shadow: none;
    	     box-shadow: none;
    	     cursor: pointer;
    	     color: #fff;
    	     border-color: #569ff7;
	}
	.selected a { color: #fff;}
</style>Code language: HTML, XML (xml)

Vieles davon habe ich aus dem Standard-Layout für die Kalenderauswahl übernommen, die sich zum Beispiel öffnet, wenn man einen Datumswert in ein Eingabefeld eingeben möchte. Das war eine für mich sehr gute Vorlage und sicherlich kann man hier und da noch ein paar Dinge verbessern, aber darum soll es hier gerade nicht gehen. Nur ganz kurz: Die Klasse CalenderContainer kommt an die ganze Kalenderansicht, WeekdayContainer ist für die einzelnen Tage der Kopfzeile, DayContainer für die Tage des Monats und selected gestaltet die Tage, für die ein Eintrag gefunden wurde. In diesem Beispiel werden sie blau. Weiter geht’s.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hallo! Mein Name ist Marco Friedersdorf und bin Freelancer im Bereich der Software-Entwicklung und IT-Beratung. Mit Artikeln wie diesem möchte ich einen kleinen Einblick in meine Arbeit geben und über die Dinge sprechen, die mich als Informatiker beschäftigen.
tripadvisor flickr americanexpress bandcamp basecamp behance bigcartel bitbucket blogger codepen compropago digg dribbble dropbox ello etsy eventbrite evernote facebook feedly github gitlab goodreads googleplus instagram kickstarter lastfm line linkedin mailchimp mastercard medium meetup messenger mixcloud paypal periscope pinterest quora reddit rss runkeeper shopify signal sinaweibo skype slack snapchat soundcloud sourceforge spotify stackoverflow stripe stumbleupon trello tumblr twitch twitter uber vimeo vine visa vsco wechat whatsapp wheniwork wordpress xero xing yelp youtube zerply zillow px aboutme airbnb amazon pencil envelope bubble magnifier cross menu arrow-up arrow-down arrow-left arrow-right envelope-o caret-down caret-up caret-left caret-right