Enhancement: Option to reference each date in the date wrapper

[Pandahisham]

In my application i need every cell to be clickable , so when clicked , they open up the event create form with the date field prepopulated, currently it is possible with javascript , but a native solution would be handier , Thanks for the great package though

[rginnow]

I have actually added this to my application directly in the HTML Code with help from php get variable. I'll post examples later today. On Feb 21, 2015 11:45 AM, "Pandahisham" notifications@github.com wrote:

In my application i need every cell to be clickable , so when clicked , they open up the event create form with the date field prepopulated, currently it is possible with javascript , but a native solution would be handier , Thanks for the great package though

— Reply to this email directly or view it on GitHub https://github.com/makzumi/laravel-calendar/issues/24.

[Pandahisham]

looking forward to your example

On Sat, Feb 21, 2015 at 10:59 PM, Ryan Ginnow notifications@github.com wrote:

I have actually added this to my application directly in the HTML Code with help from php get variable. I'll post examples later today. On Feb 21, 2015 11:45 AM, "Pandahisham" notifications@github.com wrote:

In my application i need every cell to be clickable , so when clicked , they open up the event create form with the date field prepopulated, currently it is possible with javascript , but a native solution would be handier , Thanks for the great package though

— Reply to this email directly or view it on GitHub https://github.com/makzumi/laravel-calendar/issues/24.

— Reply to this email directly or view it on GitHub https://github.com/makzumi/laravel-calendar/issues/24#issuecomment-75380628 .

[rginnow]

Sorry it took so long, I've been off Github for quite some time. Now i'm back in the swing of things at a new job.

After re-reading your statement, you are right that currently JavaScript is the only solution to allowing the actual boxes to be clickable.

Here's the promised example:

// This is the code for the PHP controller
$view = Input::get('cv', 'week');

    if(isset($_GET['tutor_id'])) {
    $uid=$_GET['tutor_id'];
} elseif(Auth::user()->role=='Admin') {
    $uid='all';
}   elseif(isset(Auth::user()->id) || Auth::user()->role=='Tutor') {
    $uid=Auth::user()->id;
} else {
    $uid='';
}

if(isset($uid) && $uid!='')
    if($uid=='all')
        $events = Meeting::orderby('date')->where('status', '=', 'active')->get()->toArray();
    else
        $events = Meeting::orderby('date')->where('status', '=', 'active')->where('tutor_id', '=', $uid)->get()->toArray();
else
    $events = Meeting::orderby('date')->get()->toArray();
$events = array_group_by('date', $events);
$new_events = [];
foreach ($events as $datetime => $session) {
    foreach ($session as $v) {
        $user = User::find($v['client_id']);
        $tutor = User::find($v['tutor_id']);
        if(isset($tutor['color'])) $color = $tutor['color'];
        else $color = '';

        $h = substr($v['date'], 11, 2);
        if($h<10) $hour=substr($h, 1, 1);
        elseif($h<12) $hour=substr($h, 0, 2);
        elseif($h>12) $hour=$h-12;
        else $hour=$h;
        $min = substr($v['date'], 14, 2);

        if($h==12 || $h>12) $ap = 'pm';
        else $ap='am';

        $time = $hour.':'.$min.$ap;
// This is where I make events clickable
        if($view=='week' || $view=='day') {
            $new_events[$datetime][] = '<a class="event-link" style="background-color:rgba('.$color.',0.6);border-color:rgb('.$color.');" href="/admin/meetings/'.$v['id'].'" data-toggle="tooltip" data-placement="top" title="Step: '.$user->step.'">'.$user->first_name.' '.$user->last_name.'</a>';
        } else {
            $new_events[$datetime][] = '<a class="event-link" style="background-color:rgba('.$color.',0.6);border-color:rgb('.$color.');" href="/admin/meetings/'.$v['id'].'" data-toggle="tooltip" data-placement="top" title="'.$time.' - Step: '.$user->step.'">'.$user->first_name.' '.$user->last_name.'</a>';
        }
    }
}

$date = Input::get('cdate');
$cal = Calendar::make();
$cal->setDate($date);
$cal->setView($view);
$cal->setStartEndHours(7,22);
$cal->setEvents($new_events);
$cal->setBasePath('/admin/meetings');
$cal->setEventsWrap(array('<div>', '</div>'));
$cal->setTableClass('table table-bordered table-responsive'); //Set the table's class name
$cal->setNextIcon('<i class="glyphicon glyphicon-chevron-right"></i>');
$cal->setPrevIcon('<i class="glyphicon glyphicon-chevron-left"></i>');

$tutors = User::where('role', '=', 'tutor')->orWhere('role', '=', 'admin')->get();

$script = '<script src="/assets/js/scripts.js"></script>';
return View::make('admin.meetings.index',
    array(
        'script'        => $script,
        'cal'               => $cal,
        'tutors'        => $tutors,
        'schedule'  => true
    )
);

And the JavaScript code on the calendar

var QueryString = function () {
    // This function is anonymous, is executed immediately and
    // the return value is assigned to QueryString!
    var query_string = {};
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
            // If first entry with this name
        if (typeof query_string[pair[0]] === "undefined") {
            query_string[pair[0]] = pair[1];
            // If second entry with this name
        } else if (typeof query_string[pair[0]] === "string") {
            var arr = [ query_string[pair[0]], pair[1] ];
            query_string[pair[0]] = arr;
            // If third or later entry with this name
        } else {
            query_string[pair[0]].push(pair[1]);
        }
    }
        return query_string;
} ();

$(document).ready(function() {
    $('.event-link').tooltip();

    // if(!QueryString.cv || QueryString.cv=="month") {
    //  var monthAndYear = $('table thead th:nth-of-type(2)').html();
    //  var split = monthAndYear.split(' ');
    //  var year = split[1];
    //  var month = split[0];

    //  var cells = $('td');
    //  var len=cells.length

    //  for (var i=0; i<len; i++){
    //      cells[i].onclick = function(){
    //          var day = $(this).find('.cal_day').html();

    //          var d = new Date(month+' '+day+' '+year);
    //          var cdate = d.format('isoDate');

    //          if(QueryString.tutor_id) var tid='&tutor_id='+QueryString.tutor_id;
    //          else tid = '';
    //          window.location.href = "?cv=day&cdate="+cdate+tid;
    //      }
    //  }
    // }

    if(!QueryString.cv || QueryString.cv=="week" || QueryString.cv=="day") {
        var cells = $('td');
        cells.each(function(i){
            $(this).on('click', function() {
                if(QueryString.tutor_id) var tid='&tutor_id='+QueryString.tutor_id;
                else tid='';
                if(this.getAttribute('data-datetime'))
                    var time = this.getAttribute('data-datetime').split(' ')[1].split(':')[0];
                else if(this.getAttribute('class')=='ctime')
                    var time = this.innerHTML.split(':')[0]
                else
                    console.log('nothing here');

                // console.log(time);
                // if(QueryString.cdate) cdate = QueryString.cdate+'&time='+time;
                // else {
                    var d = new Date(this.getAttribute('data-datetime').split(' ')[0]);
                    var cdate = d.format('isoDate');
                    cdate = cdate+'&time='+time;
                // }

                window.location.href = "/admin/meetings/create?d="+cdate+tid;
            });
        });
    }

    $('table tr.cal_labels').click(function(event) {

        if(QueryString.cv=="week" || QueryString.cv=="day")
            var monthAndYear = $('table thead th:nth-of-type(3)').html();
        else
            var monthAndYear = $('table thead th:nth-of-type(2)').html();
        var split = monthAndYear.split(' ');
        var year = split[1];
        var month = split[0];
        var d = new Date();
        var day = d.getDate();

        var d = new Date(month+' '+day+' '+year);
        var date = d.format('isoDate');

        if(QueryString.cdate)
            var cdate = QueryString.cdate;
        else
            var cdate = date;

        if(QueryString.tutor_id) var tid='&tutor_id='+QueryString.tutor_id;
        else tid='';
        window.location.href = "?cv=week&cdate="+cdate+tid;
    });

    $('select#view').bind('change', function(event) {
        var url = $(this).val(); // get selected value
        if (url) { // require a URL
                window.location.href = url;
        }
        return false;
    });

    $('select#tutor_id').bind('change', function(event) {
        var id = $(this).val(); // get selected value
        if (id) { // require a URL
            if(QueryString.cv || QueryString.cdate) {
                var cv = QueryString.cv;
                if(cv==undefined) cv = 'week'; // was month
                var cdate = QueryString.cdate;
                window.location.href = '?cv='+cv+'&cdate='+cdate+'&tutor_id='+id;
            }
            else {
                var d = new Date();
                var date = d.format('isoDate');
                window.location.href = '?cv=week&cdate='+date+'&tutor_id='+id; // was month
            }
        }
        return false;
    });

});

Pretty much all I'm doing is passing a data-dateTime attribute to each cell, in which the above JS can select and take me to the correct page. I also have a select dropdown that the user can change the calendar view. Here's a screenshot of the calendar:

Let me know if there's something else I can help with :)

[Pandahisham]

Very elegant solution , thanks for the time and effort , Fortunately i had to pause my project for months so i can implement this . May you be blessed .