A Calendar in Three Lines of CSS

Here’s a little CSS Grid use case where a list of days is transformed into a calendar:

See the Pen
Simple Calendar With CSS Grid
by Calendar Tricks (@calendartricks)
on CodePen.

My choice for this CSS calendar tutorial is a list. Why? Because it’s the easiest way to show the amazing capabilities of CSS grid.

With a little CSS extra you can easily make Sunday the last day of the week — a format we prefer here in Europe:

.weekday:nth-child(1) {
  grid-column: 7;
  grid-row: 1;
}

.first-day {
  grid-column-start: 2;
}

See the Pen Simple Calendar With CSS Grid by Bramus (@bramus) on CodePen.

Additionally I’d further adjust the code to have the first day be set by use of a CSS Custom Property. That way the calendar would be able to display any month, without needing any CSS adjustments at all.

A Calendar in Three Lines of CSS →

☝️ If you haven’t by now, you really should learn CSS Grid and read up on its best practices.

How to Perform Calendar Calculations in Your Head

In case you want to impress your family over Christmas’/New Year’s Dinner:

A so-called calendrical savant (or calendar savant) is someone who despite their intellectual disability (typically autism) can name the day of the week of a given date, or visa versa in a few seconds or even a tenth of a second (Kennedy & Squire, 2007).

While extremely impressive to behold, calendar calculations are actually very simple to perform and can be learned in less than 30 minutes. This short article will teach you how.

How to Perform Calendar Calculations in Your Head →

💵 This article is stuck behind Medium’s metered paywall … open the link in an incognito window to bypass that limit.

Easily interact with Google Calendar from PHP with spatie/laravel-google-calendar

Great new package by spatie:

use Spatie\GoogleCalendar\Event;

//create a new event
$event = new Event;

$event->name = 'A new event';
$event->startDateTime = Carbon\Carbon::now();
$event->endDateTime = Carbon\Carbon::now()->addHour();

$event->save();

// get all future events on a calendar
$events = Event::get(); 

$firstEvent = $events->first();
$firstEvent->name = 'updated name';
$firstEvent->save();

// create a new event
Event::create([
   'name' => 'A new event'
   'startDateTime' => Carbon\Carbon::now(),
   'endDateTime' => Carbon\Carbon::now()->addHour(),
]);

// delete an event
$event->delete();

Do note that you need to set up a service account for your calendar before you can access it.

Manage events on a Google Calendar →

Calling all digital nomads: Switch your mail (and other stuff) to Google Apps … yesterday!

As I’m quite a digital nomad myself I need to have access to my inbox and mail archive from any place (and with that, any system – be it my macbook, my pc, my gf’s pc, an internetcafé, etc.) at any time. Next to that issue I want to have lots of space (my mail archive already is a whopping 1.2 GiBi … after having cleaned it out!), good spam filters, one interface/app to rule them all (viz. one interface/app to manage my mail on ALL my mail addresses) and – most importantly – support for labels (aka tags).

Continue reading “Calling all digital nomads: Switch your mail (and other stuff) to Google Apps … yesterday!”