Developer Documentation for Event Calendar

Last Updated: November 7, 2017

Event Calendar plugin is developed using the custom post type which you find in WordPress

Following code inside the index.php is used for creating the custom post type called eventcal

  $args = array(

        'labels' => array(
                'name' => __( 'Events' ),
                'singular_name' => __( 'Event' ),
                'add_new_item'=>"Add New Event",
                'add_new'=>"Add New Event",
         ),
        'public' => true,
        'has_archive' => true,
        'exclude_from_search'=>true,
        'rewrite'           => array( 'slug' => 'eventcal','with_front' =>true )

    );
   register_post_type( 'eventcal', $args );

Then you can see the function for wp_enqueue_scripts which is a hook and can be used to add style and scripts which are meant to appear on the front end

Following function is used to include the CSS file for the front-end of the calendar

 
function eventcal_front_enqueue_style(){
    wp_enqueue_style( 'public', plugin_dir_url( __FILE__ ).'style/cal-front-style.css', false );
    wp_enqueue_style( 'core', plugin_dir_url( __FILE__ ).'style/jquery-ui.css', false );
    wp_enqueue_style( 'monthpicker', plugin_dir_url( __FILE__ ).'style/monthpicker.min.css', false );

}

You can use add_action() to call above function

 
add_action( 'wp_enqueue_scripts', 'eventcal_front_enqueue_style' );

Similarly for JavaScript components of the front-end, following code is used

 
function eventcal_front_enqueue_script($post){
    wp_enqueue_script( 'js-googlemap','https://maps.googleapis.com/maps/api/js?key='.get_option('gmap_api_key').'&v=3.exp',false);
    wp_enqueue_script( 'js-jquery', plugin_dir_url( __FILE__ ).'js/jquery-1.7.1.js', false );
    wp_enqueue_script( 'js-jquery-ui-min', plugin_dir_url( __FILE__ ).'js/jquery-ui.min.js', array('js-jquery'),null, true );
    wp_enqueue_script( 'js-month-picker', plugin_dir_url( __FILE__ ).'js/monthpicker.min.js', array('js-jquery','js-jquery-ui-min'), null, true  );

}

add_action( 'wp_enqueue_scripts', 'eventcal_front_enqueue_script' );

js-googlemap is used for Google map API
js-jquery is used to include the jQuery library
js-jquery-ui-min is used to include the jQuery UI library
js-month-picker is for the Month Picker script

In addition to front-end styles and scripts you need styles and scripts for the admin section of the Event Calendar plug-in. admin_enqueue_scripts action is used to include the styles and script

To include the styles

 
function eventcal_enqueue_style() {
    wp_enqueue_style( 'core', plugin_dir_url( __FILE__ ).'style/themes/flick/jquery.ui.all.css', false ); 
    wp_enqueue_style( 'public', plugin_dir_url( __FILE__ ).'style/style.css', false );
    wp_enqueue_style( 'public2', plugin_dir_url( __FILE__ ).'style/jquery-ui.css', false );
    wp_enqueue_style( 'lightbox', plugin_dir_url( __FILE__ ).'style/lightbox.css', false );
    wp_enqueue_style( 'timepicker', plugin_dir_url( __FILE__ ).'style/timepicker.css', false );
}

add_action( 'admin_enqueue_scripts', 'eventcal_enqueue_style' );

To include the scripts

 
function eventcal_enqueue_script() {
    wp_enqueue_script( 'js-jquery', plugin_dir_url( __FILE__ ).'js/jquery-1.7.1.js', false );
    wp_enqueue_script( 'js-datepicker', plugin_dir_url( __FILE__ ).'js/ui/minified/jquery.ui.datepicker.min.js', false );
    wp_enqueue_script( 'js-jquery-ui-min', plugin_dir_url( __FILE__ ).'js/jquery-ui.min.js', false );
    wp_enqueue_script( 'js-jquery-timepicker', plugin_dir_url( __FILE__ ).'js/jquery-ui-timepicker-addon.js', false );
 
    wp_enqueue_script( 'js-googlemap','https://maps.googleapis.com/maps/api/js?key=AIzaSyCMmRkyYeNzAfKKyNRQlRJbzZffJDSi0bs&v=3.exp',false);
    wp_enqueue_script( 'js-lightbox', plugin_dir_url( __FILE__ ).'js/lightbox.min.js', false );
    
}


add_action( 'admin_enqueue_scripts', 'eventcal_enqueue_script' );