The issue that some readers have with the current event calendar plugin we have designed is the what to do when event starts maybe at 9:00 PM and goes to 12:30 AM. Well, using the current event calendar we designed, you would get an event to show on two days on the calendar because is starts one day and really ends the next. Even though the events are really on two different days, people think of this as happening on the day that it starts. So to make is user friendly, it would be nice to gain control over this.

To prevent or even give you control over this we need add what we will call as a threshold. Basically, we are going to use a option that allows us to determine how many hours into the next day an event can go without being displayed on that day.

To accomplish a working threshold for our events we are going to need to take the ending time and convert it into seconds. The threshold we also be in seconds and then we will compare them. If the event is under our threshold, we will not include it on the calendar and if it above our threshold we will include it on the calendar.

Step One: Adding an Int and Constuct Methods to the Calendar Events Class

To have the option of control over our event threshold, I am going to add a construct and init method to our class. Here are the methods:

function __construct($options = NULL){
    if(!is_null($options)){
        $this->init($options);
    }
}

function init($options){
    foreach($options as $key => $value){
        $this->$key = $value;
    }
    $this->threshold = $this->time_in_secs($this->threshold);
}

I am also going to add a class variable that I am going to call $threshold.

This will now allow us to pass an option array directly into the class of use the init function to set our $threshold. You will also see this $this->threshold = $this->time_in_secs($this->threshold);, we will come back to that. But you need to know when you are passing the options to the class your time must be in MySQL dateTime format. You will see why later on.

Step Two: New Method to Convert MySQL dateTime to Seconds

If we are going to compare our event ending time with our threshold, seconds is the best way. Below is the method we will use to convert MySQL dateTime to seconds.

function time_in_secs($time){
        list($hr, $mins, $secs) = explode(":", $time);
        return ( $hr * 60 *60 ) + ( $mins * 60 ) + $secs;
}

Step 4: Change the Conditional Statements in Calendar Data Method

If you remember back from our post on the calendar event class, we had four conditions on how to add our event into the data array.

• If an event started and ended on the same date.
• If an event started and ended on different days in the same month.
• If an event started last month and continued into this month
• If an event started this month and continued into next month

Those are the four but we are really only interest in two: If an event started and ended on different days in the same month and If an event started last month and continued into this month. Because if an event starts and ends on the same day the threshold and if the event ends next month, the threshold is not needed.

So here is modifications to the code for the other two conditions:

//event that happens over several days in the current month
if($start_date < $end_date && $start_month == $end_month){
    for($start_date; $start_date <= $end_date; $start_date++){
        if($start_date == $end_date){
            if($ending_time > $this->threshold){
                $events[$start_date][] = $row;
            }
        }else{
            $events[$start_date][] = $row;
        }
    }
}

//event that started last month but continues into this month
if($start_month == $prev_month){
    for($start_date = 1; $start_date <= $end_date; $start_date++){
        if($start_date == $end_date){
            if($ending_time > $this->threshold){
                $events[$start_date][] = $row;
            }
        }else{
            $events[$start_date][] = $row;
        }
    }
}

We basically added and if statement to each. We just see if the end date is the date we want to add to the array and if it above our threshold. And if it is we add it our calendar.

Step Five: Pass the Options Array to our Class

We can now go our main plugin file: custom_event_calendar.php and pass the options array, which will currently only be our threshold. Here is the edited function :

function custom_event_calendar($atts){
   
    global $post;

    extract(shortcode_atts(array(
            'link_base' => get_permalink($post->ID),
            'month' => get_query_var('mon'),
            'year' => get_query_var('yr')
    ), $atts));

    if(empty($month)){
            $month = strftime('%m', current_time('timestamp'));
    }

    if(empty($year)){
            $year = strftime('%Y', current_time('timestamp'));
    }

    include('calendar.php');

    $options = array(
            'link_base' => $link_base
    );

    include('calendar_events.php');

    $options = array(
        'threshold' => "7:00:00"
    );

    $our_events = new Our_calendar_events($options);

    $events = $our_events->calendar_content($month, $year);

    $event_calendar = new Event_calendar($options);

    return $event_calendar->create($month, $year, $events);
}

You see that I have a MySQL dateTime of 7:00:00 which is 7:00 AM. So any event that ends before 7:00 AM will not be included.

Wrap up

We are all done. The only thing that would be nice would be to have an options page to control the threshold. Here are the files for download and you will also find that I added a style sheet to the calendar.

After the last day, all we had left to do is to get the events that we stored in the database and display them on the calendar. Well, maybe this is easier said than done. In the video tutorial, we will create a dedicated class just to get the events out of the database and prep them to be displayed on the calendar.

Considerations

There really is four types of events that we need think of:

• An event that starts and ends on the same day
• An event that starts and ends on different days but happens in the currently displayed month
• An event that starts in the previous month and ends in the currently displayed month
• An event that starts in the currently displayed month that continues into the next month

These are fourth unique cases of events that we will use for our calendar and these will determine how we get the data and also organize the data.

Our Query

As you will see in the video tutorial, we need to create a complex MySQL query that will get all the rows that meet the criteria above. This will involve a join between “our_events” table and the “posts” table. The WHERE clause takes into consideration the 4 cases from above. Here is the our query:

"SELECT e.start_date, e.end_date, e.start_time, e.end_time, p.ID, p.post_title, p.post_name, p.post_excerpt
      FROM {$wpdb->prefix}our_events AS e
      JOIN {$wpdb->prefix}posts AS p ON e.post_id = p.ID
      WHERE e.event_visible = 1
      AND p.post_status = 'publish'
      AND (e.start_date LIKE '{$year}-{$month}%' OR e.end_date LIKE '{$year}-{$month}%')
      ORDER BY e.start_time, e.start_date"

Looking at this query, the part that ensures we meet all the criteria we set above is this section:

AND (e.start_date LIKE '{$year}-{$month}%' OR e.end_date LIKE '{$year}-{$month}%')

The logic is: if we have any event that starts in this month, obviously we need get that row, but we also need to get any rows for events that end in this month. These are the events that started in the previous month and continue into the present month.

Notes on Organizing the Data

The data that we get could be as little as one or two rows but each of these could appear on the calendar multiple times if each happen over several days. This means we need create an array of $events that represents each day on the calendar which an event happens. The $keys for the $events array will be the day in which the event happens and the $value will be the $row that was found in the database. So if we have an event that starts on the 1st and ends on the 2nd we will need to insert this row two times into our array with the keys 1 and 2.

To make this determination, we need data about the event such as the start date, end date, start month, and end month. Also to help us make this determination, we will need information about the current month we are displaying: what is the previous month, what is the next month, and how many days does this month have. If you look at the code, you will see our four cases with into our calendar_data function and how we use the data about the event and month to insert the event into the $events array.

Notes on the Calendar Content

Now, that we have the data organized we need to put the data in a usable format. The data is currently in a multi dimensional array which we will need to convert to content. To do this we will loop the array on each day and create a un-order list for day. The unordered list will hold list items created from the rows of data we got from the data base.

The files

Here is the plugin for download so far

Whats left?

The calendar might be functioning but sure is not the prettiest thing, next time we will look at styling our calendar for your site.

Nevertheless, now that we have added custom post types to WordPress, It would be nice to have a number display with your custom post type stats in the right now box in your dashboard. So again you can monitor how much you aren’t publishing these either. To do this we are going to open back up our custom post type class and add a new function. If you haven’t read that tutorial don’t feel bad, just feel out of the loop as you read this tutorial or get up to speed: custom post type class.

Step One: Copy WordPress.org

Well, there is no sense why we should to try to code our own function because WordPress.org already has it done: Right Now Content Table There you will find the code we are going to take and paste into our class. After, coping the code, I am going to open our class and paste this at the end.

Step Two: Replace Bits and Pieces With Your Class Varaibles

All we have to do is then find that parts that we can potentially replace with class variables. Here is the code redone for our class:

function add_count() {

  if (!post_type_exists($this->type)) {
     return;
  }

  $num_posts = wp_count_posts( $this->type );
  $num = number_format_i18n( $num_posts->publish );
  $text = _n( $this->single, $this->plural, intval($num_posts->publish) );

  if ( current_user_can( 'edit_posts' ) ) {
    $num = "<a href='edit.php?post_type=" . $this->type . "'>$num</a>";
    $text = "<a href='edit.php?post_type=" . $this->type . "'>$text</a>";
  }

  echo '<td class="first b ' . $this->plural . '">' . $num . '</td>';
  echo '<td class="t ' . $this->plural . '">' . $text . '</td>';
  echo '</tr>';

  if ($num_posts->pending > 0) {
    $num = number_format_i18n( $num_posts->pending );
    $text = _n( $this->single . ' Pending',  $this->plural . ' Pending', intval($num_posts->pending) );
    if ( current_user_can( 'edit_posts' ) ) {
      $num = "<a href='edit.php?post_status=pending&post_type=" . $this->type . "'>$num</a>";
      $text = "<a href='edit.php?post_status=pending&post_type=" . $this->type . "'>$text</a>";
    }

    echo '<td class="first b ' . $this->plural . '">' . $num . '</td>';
    echo '<td class="t ' . $this->plural . '">' . $text . '</td>';
    echo '</tr>';
  }
}

Also, I renamed the function ‘add_count’.

Step Three: Use add_action to call our funciton

The last thing we need to do is to take the code where created the custom post type and add one last hook like this:

add_action('right_now_content_table_end', array($event_post_type, 'add_count'));

If you are not sure where this is coming from you did need to read the previous post. But now if we got everything else right you will see this:

As you see on the bottom in the right now box from my dashboard, the row for “events” was added. Looks like I have 6 events, that is because I am popular.

Step One: Adding the shortcode

To start adding the shortcode, I am going to open up the functions.php file in my active theme and at the very end of the file I am going to use the function add_shortcode(). This function accepts two parameters. The first is the name of the shortcode used in the post and the second is the name of the function called when the post is displayed.

add_shortcode('button', 'create_button');

Now when we enter the button shortcode in post the user-defined function, “create_button” will be called.

Our Shortcode Function

We must now create our user define function called create_buttion. This function will accept two parameters. The first is $atts which standards for the attributes we passed to our shortcode. These are done in the manner of the name of the attribute equals the value in quotes. Here is an example:

[shortcode attribute="value"]

This will allow us to pass some value to our shortcode that will be extracted out and used in the user defined function.

The second parameter is $content = NULL. This is content that we what to pass to our short code. It is set to NULL as a default in case $content is not passed to the shortcode. To pass content from the shortcode the to function will use a opening and closing shortcode similar to an open and closing HTML tag:

[shortcode]Some Content[/shortcode]

“Some Content” then is passed to our function as the second parameter. Here is the function so far:

function create_button($atts, $content = NULL){

}

Extracting the Shortcode Attributes

To use the data passed in the attributes, first the extract PHP function is called and then the WordPress function shortcode_atts(). This WordPress function, shortcode_atts(), requires two parameters. The first is an associative array, where the key will become a variable equal to its value in the array. The second parameter is the attributes passed to the shortcode from the post. It is important to realize that this method sets values as defaults which can then be overridden by the attributes passed to the shortcode.

For our function, the first parameter we pass to shortcode_atts() will be an array containing three keys: class, url, and id.

• class will be the CSS class of the button. By default, I set the value to ‘button’ and the CSS we will create will use this class. But if you want several styles of buttons, you can create several classes in your stylesheet and then just assign a class to the button to change the look.
• URL is the URL of where the button will point. I set the default to ‘#button’ but this is really not needed.
• id allows you to assign a specific ID to your button. This is nice if your are planning to add some custom styling or JavaScript to an individual button.

Finishing The Shortcode Function

To finish our shortcode function, we just need to take the content and the attributes and return a string of content. Here is the completed function:

function create_button($atts, $content = NULL){

    extract( shortcode_atts( array(
        'class' => 'button',
        'url' => '#',
        'id' => ""

      ), $atts ) );

    return "<div id='{$id}' class='{$class}'><a href='{$url}'><span>{$content}</span></a></div>";
}

Step Two: The Button CSS

Lastly, we need to add the CSS to the active theme’s stylesheet. Here is the css I added:

.button {
    margin:0 0 20px 0;
    overflow: hidden;
}
.button span {
    background: url(images/grad_two.png) top left repeat-x;
    overflow: hidden;
    border:1px solid #bbbbbb;
    display:block;
    float:left;
}

.button a{
    color:#325e84;
    border:1px solid #fff;
    display:block;
    float:left;
    padding:13px 20px 12px 20px;
    text-shadow: #705416 0px 1px 0px;
    text-transform: uppercase;
    font-family:Helvetica, Arial;
    text-decoration: none;
    font-size: 1.1em;
    letter-spacing: -1px;
    font-size:16px;
    font-weight: bold;
}

.button a:hover {
    color:#6eabdf;
}

The Result of Our Button Shortcode

Or How Bout:

Adding Shortcodes

The shortcode API is truly a great thing and in the video I showed how to add the calendar shortcode. We also saw how to pass attributes from our post to the shortcode to them be parse and used by our custom calendar function. Here is a quick recap of how to add the shortcode.

To add a shortcode

Adding a shortcode is done by using the add_shortcode() function in your plugin file or function.php in your theme. This function accepts two parameters. The first is the name of the shortcode and the second is the function that will be called when the shortcode is displayed. So our short code looked like this:

add_shortcode( 'event_calendar', 'custom_event_calendar');

We next need to create our custom_event_calendar function which can accept a few parameters. For our plugin, we will only pass it one variable, $atts. This is an array of attributes that can be passed to our function from the post. If you view the video there is more detail on extracting the attributes. Here is the code for taking the attributes and extracting the data we will use:

function custom_event_calendar($atts){
   
  global $post;
   
  extract(shortcode_atts(array(
    'link_base' => get_permalink($post->ID),
    'month' => get_query_var('mon'),
    'year' => get_query_var('yr')
  ), $atts));
  
  
}

This code will allow use to have some default values for $month and $year, but we need to take care of one more situation. It is what happens when the user doesn’t pass a month or year attribute to the shortcode and there is no month or year in the URL string. We would get an error. So the assumption is that the month that is being requested is the current month so if $month or $year are empty we need to set these variables to the current month and year.

We use the current_time() function to set these variable to the current time of WordPress not the current time of the server because these could be different.

Adding Our Calendar Script

The last thing we did was to add our calendar script and actually get the calendar to display. We first included the calendar script file, then we created an options array. This options array contains only one variable which we the ‘link_base’ or the permalink of the page. This allows the calendar script to then automatically generate the next and previous links.

We then create a new instance of our calendar class using our $option array. Then we simply need to return the method for creating the calendar passing it the $month and $year variables. Here is the result:

http://www.mysite.com/my-calendar-page/2010/09

The only thing I added to the normal URL string is the 2010/09, which the first section is the year and the second section is the month. It will allow us to easily get for month and year on any page or post to be used in our calendar. Also, this URL structure will allow us to create links to the previous and next months.

Now, If you were try this on any normal WordPress install, you would get a 404 error, page not found. This mean WordPress doesn’t know what to do with this URL structure. So we will need to add it to the rewrite rules. Also, we will need to add the query vars for year and month to get the data from the URL string.

What are Rewrite Rules

If you remember I wrote a post not too long ago on how to see your WordPress rewrite rules, but it didn’t go into too much detail. But to start to understand what WordPress rewrite rules are, you have to have an understanding of the Wp_rewrite class.

The Wp_rewrite class is the method that allows you to have different configurations of URL’s or pretty URL’s. Also, the Wp_rewrite class helps WordPress determine what page visitor is looking for. This is done with a set of rules and the URL string. Currently the URL is telling WordPress to find this post. Seems simple enough but what happens when you are looking for child pages or archives. WordPress can take the URL and find a match within the rules to quickly find the correct data to display.

Without the Wp_rewrite class, WordPress would have to perform multiple database queries to find the correct data. Depending on the data the visitor is looking for this could be quite a few queries before the correct information is found.
Using rewrite rules saves WordPress the hassle of multiple queries. It can go the rules find a match and instantly know what data to go look for.

You should also know that these rules live in the database. And simply adding your rules to the rewrite rules will not be enough most times. You will need to flush what is save and have the rules regenerated to ensure your rules are adding, but more on this later in the post.

Setting Up Your Own Class To Add Rewrite Rules

I prefer to use a class to handle not only adding rewrite rules but also adding query vars. The nice thing about a class is that it is predictable and reusable so I can use this example on any plugin needing rewrite rules.

So I am going to start by creating a new file within our main plugin folder called add_rewrite_rules.php. In this file I am going to create a class that I call the same as the file Add_rewrite_rules.

Since I will be adding query vars and rewrite rules, I am going to create two variables with those names.

Here is what we have so far:

class Add_rewrite_rules{
    
    var $query_vars;
    var $rules;
}

To assign values to these variables I am going to create a construct function that will accept a $config. I give the $config variable a default value of null. I then an if statement to see $config is null. If it isn’t, meaning a value was passed to the construct of the class, we will run our next function passing it the $config.

Our next function is init function that I that simply takes an array and based on the keys, assigns the values to the class variables that have the same names as the keys. Below is the class so far:

 class Add_rewrite_rules{

  var $query_vars;
  var $rules;

  function __construct($options){
    $this->init($options);
  }

  function init($options){
    foreach($options as $key => $value){
      $this->$key = $value;
    }
  }
}

Adding Our Method To Add Query Vars

The next step is to add a method that adds query vars to WordPress. As mentioned above, we want to add two query vars, one representing the year and the other representing the month. The class variable $query_vars should be an array.

Also, since we will be using this method with a filter hook, our class method to add query vars should accept a variable which I called $query_vars. Sounds confusing that we have two variables named $query_var. But, one is a class variable so we will use $this to reference it.

I then create a loop to go through the array of query vars we want to add and add it to the $query_var array that we passed to our function. In this case $query_var, the one we passed to our function, is the actual array of query vars WordPress will use. Here is our method:

 //filter function to be used with add_filter() with the hook "query_vars"
function add_query_vars($query_vars){

  foreach($this->query_vars as $var){
    $query_vars[] = $var;
  }

  return $query_vars;
}

Examining pre-existing rewrite rules

If you used the post on how to view rewrite rules, you will find that the rewrite rules are stored in an array. The keys of the array are regular expressions and the values of the array contain the matches of those regular expressions and the query vars. Here is what you will see:

To begin to add our rewrite rules we will need two methods, one to add the rules and the other to flush the rules.

Adding Our ReWrite Rules to WordPress

To start, we will just focus on adding the rules. It is a really simple method within our class that first calls in the $wp_rewrite global variable. Then it sets the wp_rewrite class variable rules equal to $this->rules plus the old rules, $wp_rewrite->rules. Here is our method:

 function add_rewrite_rules(){
  global $wp_rewrite;

  $wp_rewrite->rules = $this->rules + $wp_rewrite->rules;
}

Flushing The Rules

Flushing is the act of having the rewrite rules regenerated. The rewrite rules live in your wp_options database and just adding rules like we did, will not have them recognized by WordPress. So we need to tell WordPress to regenerate the rules so ours are added. There are two methods.

The first method of flushing the rewrite rules is to go to the permalinks screen within the admin and hit save. This will regenerate the rules and you are all set. The reason why this is not the best method is because we are creating a plugin that potentially thousands of people are going to use. If each one has to go hit save in the permalinks screen, well we are not that user friendly.

The other method is to flush the rewrite rules ourselves. We will do this by creating another method within our class with just this purpose.

But a quick not on flushing rewrite rules: Flushing the rules is considered to be a quite laborious process that shouldn’t be done every time the site is displayed.

This statement makes us have to ensure that our rules are added but not flush the rules every time the site is visited. This means we will need to add one more method to our class to check to see if our rules have already been added. Here is the method that I devised:

 function rules_exist(){
  global $wp_rewrite;

  $has_rules = TRUE;

  foreach($this->rules as $key => $value){
    if(!in_array($value, $wp_rewrite->rules)){
      $has_rules = FALSE;
    }  
  }

  return $has_rules;
}

Now to our flushing function:

 function flush_rules(){
  global $wp_rewrite;

  if(!$this->rules_exist()){
    //echo "flushed"; // If want to see this in action uncomment this line and remove this text and you will see it flushed before your eyes
    $wp_rewrite->flush_rules();
  }
}

Using the class

To use the class we just created I am going to go back into my main plugin file: custom_event_calendar.php and include our new file. I am going to create an $options array. The first thing I am going to add to my array, is an array of query vars with ‘query_var’ as the key. The next thing I will add is another array with my ‘rules’. This contains a regular expression as the key and a value containing a matches array and query vars.

Let’s go over the regular expression I used and how it is used with the match. Each section in () is a match. So the first match is (.+?) which will be the first match, $matches[1], and will be assigned the query var pagename. Next match, $matches[2], is ([0-9]{4}) and will be assigned to the query var yr and the third match, $matches[3], is ([0-9]{1,2}) assigned to the query var mon.

I then take this options array and create a new instance of my add_rewrite_rules class. I then use add_action and add_filter to call my methods on specific hooks. Here is the code:

 include(EVENT_CALENDAR_DIR . "add_rewrite_rules.php");

$options = array(
    'query_vars' => array('yr', 'mon'),
    'rules' => 
      array(
        '(.+?)/([0-9]{4})/([0-9]{1,2})/?$' => 'index.php?pagename=$matches[1]&yr=$matches[2]&mon=$matches[3]'
      )
  );

$rewrite = new Add_rewrite_rules($options);

add_action('wp_head', array(&$rewrite, 'flush_rules'));
add_action( 'generate_rewrite_rules', array(&$rewrite, 'add_rewrite_rules') );
add_filter( 'query_vars', array(&$rewrite, 'add_query_vars') );

And all that will add this to the array:

And if we change our URL to http://www.example.com/about/2010/10/ we will no longer get a 404 error.

Getting the query var data

Now that we added the year and month we can work with it. I can simply call

$mon = get_query_var('mon');

And 10 will be assigned to my variable.

Get the code:

Here is the plugin so far: custom_event_calendar

What’s next?

We will need to find a calendar script and start creating a short code to display our calendar.

To repopulate our form, we will need to first create a method within event_class to get the data and convert it to the right format. Then will need to modify our event_meta_options function to use this new method to repopulate the fields in our event calendar meta box.

The get_event Method Within Our Class

As the heading implies, I am going to create a new method within our event_class called get_event. This method will return the data we need to repopulate the form in the correct format. It will accept one variable, represented by $post_id.

Okay, here is the thing: what happens when we create a new post. Well, there is no pre-existing data for us to get so this would cause an error. So we need to somehow find out if the post we are creating already has data and if it doesn’t return something in its place.

With that said, we will first need to call in the $wpdb object and create a variable, $table_name, to hold the name our table. Then will use the $wpdb get_row method and store this to a variable. The method will then use the get_row method from $wpdb to run a query containing a WHERE clause. The WHERE clause will find the data based on the $post_id that we passed to our function.

We can then test to see is if our $row is empty. If it is empty then we can just return an empty array of data with the field names. So if the post is new this data will populate the fields with values that are empty strings.

If there is a row, then we will want to create an array for the data. In this array we us our methods, format_date and format_time, to format the data to the inputted format. Here is completed function:

function get_event($post_id){
  global $wpdb;

  $table_name = $wpdb->prefix . "our_events";

  $row = $wpdb->get_row("SELECT * FROM {$table_name} WHERE post_id = {$post_id}", ARRAY_A);
  //if the row is empty that means there is no save data so return an empty array
  if(empty($row)){
    return array(
      'start_date' => "",
      'end_date' => "",
      'start_time' => "",
      'end_time' => "",
      'event_visbile' => 1
    );
  }
  //if there is a row than take that row and convert the date/time to the input format and return it
  return array(
    'start_date' => $this->format_date($row['start_date']),
    'end_date' => $this->format_date($row['end_date']),
    'start_time' => $this->format_time($row['start_time']),
    'end_time' => $this->format_time($row['end_time']),
    'event_visbile' => $row['event_visible']
  );
}

Modify Our Event_options

Now that we have our method created within our class, we need to modify our event_option function within custom_event_calendar.php.

This will begin by making sure that the $post global is pulled into our function. Then will need to include our file containing our class. We will create a new instance our class Manage_events. Next, we will use the method created above to get the data with the $post->ID. Then all left to do is change the values within our inputs to the associated key within our array. Here is the completed function:

function event_meta_options(){

  global $post;
  
  include(EVENT_CALENDAR_DIR . "event_class.php");

  $event = new Manage_events;
  
  $data = $event->get_event($post->ID);

  $table = "<table>";
  $table .= "<tr><td><label for='start_date'>Start Date</label></td><td><input class='date_field' type='text' name='start_date' value='" . $data['start_date'] . "' /></td></tr>";
  $table .= "<tr><td><label for='end_date'>End Date</label></td><td><input class='date_field' type='text' name='end_date' value='" . $data['end_date'] . "' /></td></tr>";
  $table .= "<tr><td><label for='start_time'>Start Time</label></td><td><input class='time_field' type='text' name='start_time' value='". $data['start_time'] ."' /></td></tr>";
  $table .= "<tr><td><label for='end_time'>End Time</label></td><td><input  class='time_field' type='text' name='end_time' value='". $data['end_time'] ."' /></td></tr>";
  $table .= "<tr><td><label for='event_visible'>Show Event:</label></td><td><select name='event_visible'><option value='1'>Yes</option><option value='0'>No</option></select></td></tr>";
  $table .= "</table>";
  
  echo $table; 
}

Now when we have event data already saved for an event, we go to edit the post we will have the form repopulated and see this:

What Next Next for our Event Calendar Plugin

Now that we have the majority of the backend of the event calendar plugin complete, we can move to creating the front end functionality. We will next focus on the URL structure of our site and how we can get some way to use rewrite rules to help get this done.

To create our class, I am going to create a new file which I call event_class.php. Within this PHP file, I added the following code:

<?php

if(!class_exists(‘event_class’)){
  
  class Event_class{

  }
}

The code starts out with some opening PHP tags and then uses the function class_exists() to see if the class we are about to create already exists. This is optional, but is there to prevent errors in case we try to reload the class after it has already been included. Then I created the class called “Event_class”. Now that this is complete we can start adding our methods to the class.

A Conflict of Formats

You might have noticed that the inputs for start date and end date in the meta box are in a format more familiar to users, month/day/year, but the MySQL format is different for dates. The fields in MySQL for dates use the following format: year-month-day. So a date input as 9/23/2010 would need to be formatted to 2010-09-23 to be saved to the database. That means we will need methods within our class to not only take the inputted format and convert it to the MySQL format but back out of MySQL format to the inputted format.

Also, the inputted time has a different format than the MySQL format for time. The inputted time uses AM and PM with a 1 – 12 scale, but MySQL is a 24 clock which also includes seconds. So this means will need two more methods in our class to covert the inputted time to the MySQL format and back from the MySQL format back to the inputted format.

With all that being said, I know that I need 4 methods off the bat to the class that do nothing that convert dates and times form one format to another. I am not going to walk through the code with you. The code is below and is well commented. If you have questions please post them in the comments and I will answer them the best I can.

Convert dates from inputted format to MySQL date format

function mysql_date($date){
  list($month, $day, $year) = explode("/", $date);
  return $year . "-" . $month . "-" . $day;
}

<h5>Convert dates from MySQL to the inputted format</h5>

<code>function format_date($date){
  list($year, $month, $day) = explode("-", $date);
  return $month . "/" . $day . "/" . $year;
}

Convert time from inputted format to MySQL format

function mysql_time($time){
  list($time, $am_pm) = explode(" ", $time);
  list($hour, $minute) = explode(":", $time);

  //just make sure the hour is an integer
  $hour = (int) $hour;
  //we use this in our conditional statements below
  $is_am   = FALSE;
  //use strtoupper to make the test uppercase to test to see if it AM
  if(strtoupper($am_pm) == "AM"){
    $is_am = TRUE;
  }
  //test to see if is the 12 am 
  if($hour == 12 && $is_am){
    $hour = 0;
  }
  //test to see if it is the afternoon and if is add 12
  if($hour < 12 && $hour > 0 && !$is_am){
    $hour = $hour + 12;
  }
  return $hour . ":" . $minute . ":" . "00";
}

Convert MySQL Time format back to input format

function format_time($time){
  list($hour, $minute, $second) = explode(":", $time);

  //make sure the hour is an integer
  $hour = (int) $hour;

  $am_pm = "AM";

  //is the hour in the afternoon?
  if($hour > 12){
    $hour = $hour - 12;
    $am_pm = "PM";
  }

  //is it 12 in the morning?
  if($hour == 0){
    $hour = 12;
  }

  return $hour . ":" . $minute . " " . $am_pm;
}

Seems like a lot but these functions will seamlessly get the format we want without having to force the user to use some format that they are unfamiliar like year-month-day or a 24 hour clock.

Preventing Form Submission Errors

Another issue we need to deal with is: if the user inputs a date or time that really isn’t a date or time or a date or time that we didn’t plan on converting. This would be the case if the user tried to enter “January 25, 2011” or the user just enters something that doesn’t even resemble a date. We then don’t want to save this data to the database because we can’t convert to the correct format. Also, if we don’t this, potential errors might happen when the post is saved. So the methods we will add to our class is to test to see if the inputted date and inputted time are in the correct format that we need before we convert it and save it to the database table.

The two methods that will add simply return true or false use preg_match and a regular expression. Below you will find the two functions for testing the date format and time format.

Is it a valid date inputted?

function valid_date($date){
  return preg_match('/(\d){1,2}/(\d){1,2}/(\d){4}/', $date) ? TRUE : FALSE;
}

Is it a valid time inputted?

function valid_time($time){
  return preg_match('/(\d){1,2}:(\d){2}\s(AM|PM|am|pm)/', $time) ? TRUE : FALSE;
}

Class Method to Save the Event information

The next to add to our class is a method to save the event data, start_time, end_time, start_date, end_date, and event_visible, to the database. The method is going to accept a variable, which will be an array of post ID, start_date, end_date, start_time, end_time, and event_visible, that will pass to the method when saving the post.
Then, I created a if statement, which uses the methods from above testing the data in the array, start_date, end_date, start_time, and end_time, to see if they are in the correct format. If it is not then the function will return false and nothing will be saved.

If the times and dates are in the correct formats, we will redefine start_day, end_day, start_time, and end_time within our array by using our MySQL convert methods, mysql_date and mysql_time.

Once the values in the array are in the correct format for MySQL, then it will then move to either updating a pre-existing row or inserting a new row. We do this by first calling in the $wpdb global database object and then defining a variable called $table which contains the name our event table.

After that we will try to get a row where the post_id is equal to the post_id in our inputted array. If $row is empty, then just insert the $data and return TRUE.

“Else”, means that there is a row that already exists so we will use the update method in the $wpdb database object. This will first accept the name of our $table and then the $data array. Next, is an array that indicates the where statement. Then an array for the format of the data we are updating, “%s” for stings and “%d” for integers. So the post_id is an intger so “%d” but the date and time fields are considered strings or “%s”. And lastly, an array is inputted which represents the format of the where clause, so again post_id is an integer or “%d”. Then we just return true.

Here is the completed function:

function save($data){

  if($this->valid_date($data['start_date']) && $this->valid_date($data['end_date']) && $this->valid_time($data['start_time']) && $this->valid_time($data['end_time'])){

    $data['start_date'] = $this->mysql_date($data['start_date']);
    $data['end_date'] = $this->mysql_date($data['end_date']);
    $data['start_time'] = $this->mysql_time($data['start_time']);
    $data['end_time'] = $this->mysql_time($data['end_time']);

    global $wpdb;

    $table = $wpdb->prefix . "our_events";

    $row = $wpdb->get_row("SELECT * FROM {$table} WHERE post_id = " . $data['post_id'], ARRAY_A);

    //if the row is empty insert the data
    if(empty($row)){
      $wpdb->insert( $table, $data );

      return TRUE;
    }else{
      $wpdb->update($table, $data, array('post_id' => $data['post_id']), array('%d', '%s', '%s', '%s', '%s', '%d'), array('%d'));

      return TRUE;
    }      
  }
  return FALSE;
}

Save the Post – add_action – save_post

Yes, we are still not done. We need to now create a user defined function back in our main plugin file: custom_event_calendar.php. Our user defined function will also need to be called, so we are going to user the function add_action with the hook “save_post” to call our function.

The user defined function I named “save_event_data”. It starts off with an if statement that tests the event_type to see if it is an “event”. If it is not, there is no need to do anything, but if it is an “event”, we will need to include our class. I then used our constant for the absolute path to our file that holds our class: event_class.php. I then created a new instance of our class and stored in the variable $event. Then I created an array with data we need to save from the superglobal $_POST. Lastly, I passed the array to the save method within our class.

add_action('save_post', 'save_event_data');

function save_event_data(){
  
  if($_POST['post_type'] == "event"){
    
    include(EVENT_CALENDAR_DIR . "event_class.php");
    
    $event = new Manage_events;
    
    $data = array(
      'post_id' => $_POST['ID'],
      'start_date' => $_POST['start_date'],
      'end_date' => $_POST['end_date'],
      'start_time' => $_POST['start_time'],
      'end_time' => $_POST['end_time'],
      'event_visible' => $_POST['event_visible']
    );
    
    $event->save($data);
  }
}

Now, when an event is saved and there is valid data in the meta box it will be saved to the database. So done!

Moving Forward With Our Event Calendar Plugin

Okay, that is a lot to make all the things happen. But using a class like we did will ensure consistent results and one place to go back to if we need to do edits or improve the code. We actually are still not done, we saved the data but we need to now repopulate the form and this will be tomorrow’s discussion.

The JavaScript that we will be adding are a datepicker and a time selector. They will create popups when the user clicks on a specific field allowing them to quickly select a date on a calendar or input a time. The datepicker can be found here and the time selector here. You will need not only the JavaScript but also the CSS for each.

An important note about the time selector, the time selector from the above site might not work in the admin right out of the box. This is due to JavaScript conflicts. So I change the code a bit and here is a link to download the file.

So to begin adding our JavaScript and CSS, I am going to create a folder within our plugin called “js” to holder our JavaScript and a folder called “css” to hold our stylesheets. Inside of each folder I will place the corresponding files.

Register the JavaScript and Stylesheets

After placing the JavaScript and CSS in their folders, we need to now register them with WordPress. So I will use add_action function to hook into WordPress’ initialization to register the files. I will also need two user defined functions which I called register_event_javascript for the scripts and register_event_css for the css.

Within register_event_javascript we will use the function below to register the script.

wp_register_script(handle, $src, $deps, $ver, $in_footer);

• $handle is the name of that we use to reference our JavaScript. So for the datepicker, we can use the name “datepicker”.
• $src is going to be the URL path to our file. We will use our defined constant EVENT_CALENDAR_URL plus javascript folder name “js” and the file name to create a path to the file.
• $dep is an array that contains the javascript libraries that this JavaScript depends on and in our case both with be jQuery.
• $ver is the version of the javascript we want to call. This is optional.
• $in_footer is a Boolean which indicates it the JavaScript will be call in the footer. This is optional as well.

So here is the code:

add_action('init', 'register_event_javascript');

function register_event_javascript(){
  wp_register_script('datepicker', EVENT_CALENDAR_URL . 'js/datepicker.js', array('jquery'));
  wp_register_script('timeselect', EVENT_CALENDAR_URL . 'js/timeselect.js', array('jquery'));
}

Now that our JavaScript are registered, we can register our CSS and we will use a similar function that I will not cover but it is very similar to wp_register_script.

add_action('init', 'register_event_css');

function register_event_css(){
  wp_register_style('timeselect', EVENT_CALENDAR_URL . 'css/timeselect.css');
  wp_register_style('datepicker', EVENT_CALENDAR_URL . 'css/datepicker.css');
}

Including Our Javascript and Stylesheets

Having our JavaScript and Stylesheets registered with WordPress is only one half of what we need. Now we to include them on the pages where will use them. We need to first create two user defined functions; one for the CSS, event_admin_css, and the other for the JavaScript, event_admin_javascript. We will then use the add_action function to hook into ‘admin_print_scripts’ and ‘admin_print_styles’ and call these two functions.

Our first user defined function, event_admin_javascript, will first call in the global $post variable. This will then be used to create an if statement where we will test to see if the post type is equal to event. This will allow us to only load the JavaScript on the event post type pages within the admin. Within our if statement, we will use the function wp_enqueue_script, which will accept the defined handle for the script that we want to include.

Here is the code for just the JavaScript:

add_action('admin_print_scripts', 'event_admin_javascript');

function event_admin_javascript(){
  global $post;
  
  //test to see if the post type is event and if it is load the javascript
  if($post->post_type == 'event'){
    wp_enqueue_script('timeselect');
    wp_enqueue_script('datepicker');
  }  
}

Now that is complete we need to bring in the css to make it function correctly. The code for the css is below and you will only notice one change. We changed the function from wp_enqueue_script to wp_enqueue_style inputing both handles for our css files.

add_action('admin_print_styles', 'event_admin_css');

function event_admin_css(){
  global $post;

  //test to see if the post type is event and if it is load the javascript
  if($post->post_type == 'event'){
    wp_enqueue_style('timeselect');
    wp_enqueue_style('datepicker');
  }
}

Calling the JavaScript

The last step to get our JavaScript to work is to call the actual functions. Now, the one thing we need to make use of is the selectors that we used inside our meta box for the event options. If you look back over the tutorial from yesterday, you will see that I gave the inputs for start and end dates a class of “date_field” and the input for start and end times a class of “time_field”. This will allow us to call our apply our JavaScript to those specific fields. If you didn’t do that you need to do it before moving forward.

The next step is to create another user defined function that will echo out the JavaScript we are calling. I called the function call_event_javascript and it uses the action hook admin_footer to be called. Here is the code:

add_action('admin_footer', 'call_event_javascript');

function call_event_javascript(){
  global $post;
  //test to see if the post type is event and if it is call the javascript
  if($post->post_type == 'event'){
    echo "<script type='text/javascript'>
        jQuery(document).ready(function(){
          jQuery('input.time_field').ptTimeSelect();
          jQuery('input.date_field').simpleDatepicker();
          });
      </script>";
  }
}

First, looking at the code above you might notice that I didn’t use the $ sign so often used with Jquery. I did this because this can cause conflicts. Also, I again test to see if the post type is equal to event before I actually echo the JavaScript.

That is it and here is the datepicker result:

And here is the time selector:

The Next Steps

While adding JavaScript to our meta box might improve the user’s experience, we still haven’t addressed how we are going to save this data to our database. This is the next step. We are going to create a class to handle all the functions we will need. This will include converting the inputted time to a MySQL format and then back to the inputted format. Also, saving the data to the database and getting the data.

Also, here is the files so far: custom event calendar files.