Ineffable Calendar

By Leif M. Wright

A PHP-based calendar designed for flexibility

Download Zip
Example
Source

Using Ineffable Calendar

Ineffable Calendar is incredibly easy to use. You can implement it on your page with a few lines of code:
<div id=container>
<?
   include "ineffable_calendar.php";
   $c = new ineffable_calendar();
   $c->set_date_to_today() ? $_REQUEST['m'] : $c->set_date($_REQUEST['m'],$_REQUEST['d'],$_REQUEST['y']);
   echo $c->month_view();
?>
</div>

Code explained

Let's step through the code above. First, you create a div called "container." The idea is to have a box where the calendar lives. You can name this whatever you want.

After that, we have the php initiation string: <?. This tells PHP to start compiling the code after that string.

Next, we have an include declaration, which tells php where to find Ineffable Calendar.

The part that says $c = new ineffable_calendar(); instantiates a new ineffable_calendar object, which contains all the methods necessary to get a calendar onto your page.

The calendar object, however, is completely blank, and if you tried to show a calendar right now, it would be empty, not knowing what date it is. So the next line is a ternary operator, a kind of shorthand for the common if/then/else scenario. I'll go through it bit by bit. First, here's the full line:

$c->set_date_to_today() ? $_REQUEST['m'] : $c->set_date($_REQUEST['m'],$_REQUEST['d'],$_REQUEST['y']);

The first part, $c->set_date_to_today(), is the "else" of the common if/then/else operator. In other words, it's telling the calendar to set its date to today's date if the other conditions in the statement are not met. This ensures that the calendar will, at the very worst, show this month with today highlighted.

That part is followed by a question mark, which tells PHP that it's reading a ternary operator. I think of it like this: do this if condition is true, else, do that. Of course, in that wording the question mark is the "if", and the colon is the "else". The condition for the "if" in this case is $_REQUEST['m']. It's checking to see if the item 'm' (month) exists inside the $_REQUEST array. That special array has been provided by PHP since PHP 5, and it contains the request data passed to the page. It contains the contents of $_GET, $_POST and $_COOKIE, so it's a handy shorthand to avoid having to figure out whether the user has entered data via POST or GET.

That is followed by a colon, which is the "else" of this ternary operator. Following that is $c->set_date($_REQUEST['m'],$_REQUEST['d'],$_REQUEST['y']). That tells the calendar to set the date to the month, day and year parameters requested by the user.

After that, there's only one more line to use to create the ineffable calendar on your page. That, of course is echo $c->month_view();, which echoes the calendar onto your page.

Boom. You're done.

You will, however, notice that Ineffable Calendar sends a calendar to your page completely unformatted, meaning it will be a pretty ugly string of letters and numbers, not at all like you expect a calendar to look:

That's because it expects you to set the look of the calendar using CSS. And that's simple, by creating style tags in the head of your page and styling each item in the calendar, which I've provided here:

<style>
#container {
  width:708px;
  float:left;
  font-size:10pt;
}
.ic_calendar {
  border-top:1px solid gray;
  border-bottom:1px solid gray;
  width:708px !important;
  padding:0px;
  clear:both;
}
.cal_title {
  text-align:center !important;
  background-color:#c9c6c6;
  height:20px;
}
.week, .day_titles {
  display:block;
}
.day {
  min-width:100px !important;
  max-width:100px !important;
  min-height:100px !important;
  width:100px;
  height:100px;
  background-color:#f6f6f6;
  float:left;
  border-top:1px solid gray;
  border-right:1px solid gray;
  display:inline;
  overflow-y:auto;
}
.dayevents {
  padding:1px;
  height:80px;
  width:100px;
}
.daytitle {
  float:left;
  border-top:1px solid gray;
  border-right:1px solid gray;
  width:100px;
  min-height:20px;
  max-height:20px;
  font-size:9pt;
  padding-top:3px;
  height:20px;
  text-align:center;
  display:inline;
}
.date {
  float:right;
  text-align:right;
  width:98px;
  padding-right:2px;
  clear:both;
  background:linear-gradient(#c7c7c7, #f6f6f6);
  margin-bottom:5px;
}
.date:hover{
  cursor:pointer;
}
.today{
  background-color:#bcbbbb;
}
.today .date {
  backgroun:linear-gradient(#373737,#bcbbbb);
  color:#d9d6d6;
}
</style>

That bit of CSS should get your calendar looking like you expect a calendar to look:


. Each of the selectors are provided by the Ineffable Calendar script, and then the CSS above operates on them, formatting them as described.

Customizing Ineffable Calendar

You may need more than one calendar on a page. For example, say you need a full-size calendar like the one above and a small calendar for some other purpose on the same page. The selectors provided by Ineffable Calendar will always render the way your CSS instructs them to, and if you need two different kinds of calendars, you need different selectors. Luckily, Ineffable Calendar is completely customizable.

After instantiating the calendar ($c = new ineffable_calendar();) and setting the date ($c->set_date_to_today();), you can call any of the following functions to change the selectors:

FunctionExplanationDefault value
$c->set_day_name_format('initials');
Sets the type of letters that identify the names of the days of the week (Sunday, Monday, etc.). long gives the full day name, short gives day name abbreviations (Mon, Tue, etc.) and initials gives the first two letters of the day (Su, Mo, Tu).Default is long.
$c->set_month_name_format('short');
Sets the type of string that identifies the names of the months (January, February, etc.). long gives the full month name, short gives month name abbreviations (Jan, Feb, etc.).Default is long,
$c->set_calendar_class('ic_tiny_calendar');
Sets the class name for the calendar's enclosure. This can be set to anything you want. ic_calendar is default (you can see its CSS above).
$c->set_calendar_id('tiny_calendar');
In addition to a class, the calendar enclosure has a unique id. This helps with CSS selectors and jQuery. This sets that id. This can be set to anything you want.ineffable_calendar is default.
$c-> set_calendar_title_id('tiny_calendar_title');
The enclosure containing navigation and month name has a unique ID. This sets that id. This can be set to anything you want. calendar_title is default.
$c->set_calendar_title_class('tiny_cal_title');
The class for the enclosure containing navigation and month name. This can be set to anything you want. cal_title is default.
$c->set_month_nav_class('tiny_month_nav');
Sets class for the spans containing navigation arrows. Can be useful when triggering jQuery by clicks on the arrows. This can be set to anything you want. month_navigation is default.
$c->set_day_titles_class('tiny_day_titles');
Sets class for the titles of the days that go across the top of the calendar (Monday, Tuesday, etc). This can be set to anything you want. day_titles is default.
$c-> set_individual_day_title_class('tiny_day_title');
Each day name (Monday, Tuesday, etc.) is its own block. This sets those blocks' class. daytitle is default.
$c->set_week_row_class('tiny_week');
Each time a new week is displayed, it is enclosed in a div. This sets the class for those divs. This can be set to anything you want. week is default.
$c->set_day_container_class('tiny_day');
Each day is in its own container. This sets the class for that container. This can be set to anything you want. day is default.
$c->set_blank_class('tiny_blank');
If the month starts on a day other than Sunday, the calendar will display blank days before the first of the month. This sets the subclass for those divs. This can be set to anything you want. blank is default.
$c->set_container_class('tiny_container');
Days of the month have a subclass indicating they're active days. This sets that subclass name. This can be set to anything you want. container is default.
$c->set_today_class('tiny_today');
If the calendar is displaying the current day, that day has a subclass indicating that. This sets that subclass. This can be set to anything you want. today is default.
$c->set_date_container_class('tiny_date');
The numbers at the top of each active day cell indicating what day of the month it is. This sets the class for those cells. date is default.

You may notice that I've put "tiny_" before class names in the examples above. That's because by making those declarations and creating CSS to match each of those, I created a calendar that looks like this (the CSS for that is in the download zip):

Since each item on there has its own class and id, I can then trigger jQuery by clicking on one of the dates, and jQuery will receive an action on the date selector and the attributes of that date (month, year, day). That could initiate a jQuery function to do something based on that user input.

Obviously, this is bare-bones and brand new, so I'll be updating the script as I find more need or with user feedback, which you can provide here.