vendredi 29 mai 2015

Jquery datepicker create 2 separate classes for different category (beforeShowDay)

I am trying to figure out how I can highlight specific dates on my datepicker with different colours.

I have managed to create the function to highlight dates I want, but I have two categories; confirmed and pending and would prefer to include both if possible. I tried simply copy and pasting the function with different names but it doesnt seem to work.

<script>
jQuery(document).ready(function() {
var eventDates = {};
<?php 
    $events = DB::getInstance()->query("SELECT statement FROM table WHERE criteria");
    if(!$events->count()){
    }else{
        foreach ($events->results() as $events){
            $begin = new DateTime( $events->check_in );
            $end = new DateTime( $events->check_out );
            $end = $end->modify( '+1 day' );
            $interval = DateInterval::createFromDateString('1 day');
            $period = new DatePeriod($begin, $interval, $end);
            foreach ( $period as $dt ){
                $eventDate = $dt->format( "m/d/Y" );
                echo "eventDates[ new Date( '" . $eventDate . "' )] = new Date( '" . $eventDate . "' );";
            }
        }
    }
?>  
jQuery('#calendar').datepicker({
    beforeShowDay: function( date ) {
        var highlight = eventDates[date];
        if( highlight ) {
             return [true, "event", "Booking blocked"];
        } else {
             return [true, '', ''];
        }
     }
});
});
</script>

But what I would like to achieve is to run two queries from my DB giving two sets of results and then create two classes for two colour output on the datepicker. I hope this makes sense, if anyone has a solution please let me know.

The above code works for one class. below is what I have tried to do to get two classes but it just doesnt work.

<script>
jQuery(document).ready(function() {
var eventDates = {};
var eventDatesConf = {};
<?php 
    $events = DB::getInstance()->query("SELECT statement FROM table WHERE criteria");
    if(!$events->count()){
    }else{
        foreach ($events->results() as $events){
            $begin = new DateTime( $events->check_in );
            $end = new DateTime( $events->check_out );
            $end = $end->modify( '+1 day' );
            $interval = DateInterval::createFromDateString('1 day');
            $period = new DatePeriod($begin, $interval, $end);
            foreach ( $period as $dt ){
                $eventDate = $dt->format( "m/d/Y" );
                echo "eventDates[ new Date( '" . $eventDate . "' )] = new Date( '" . $eventDate . "' );";
            }
        }
    }
    $eventsConf = DB::getInstance()->query("SELECT statement FROM table WHERE criteria");
    if(!$eventsConf->count()){
    }else{
        foreach ($eventsConf->results() as $events){
            $begin = new DateTime( $events->check_in );
            $end = new DateTime( $events->check_out );
            $end = $end->modify( '+1 day' );
            $interval = DateInterval::createFromDateString('1 day');
            $period = new DatePeriod($begin, $interval, $end);
            foreach ( $period as $dt ){
                $eventDate = $dt->format( "m/d/Y" );
                echo "eventDatesConf[ new Date( '" . $eventDate . "' )] = new Date( '" . $eventDate . "' );";
            }
        }
    }
?>  
jQuery('#calendar').datepicker({
    numberOfMonths: 2,
    beforeShowDay: function( date ) {
        var highlight = eventDates[date];
        var highlight2 = eventDatesConf[date];
        if( highlight ) {
             return [true, "event", "Booking blocked"];
        } else {
             return [true, '', ''];
        }
        if( highlight2 ) {
             return [true, "event2", "Booking"];
        } else {
             return [true, '', ''];
        }
     }
});
});
</script>

Many thanks in advance.

Aucun commentaire:

Enregistrer un commentaire