CodeIgniter Forums
Javascript calendar problem - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forum-21.html)
+--- Thread: Javascript calendar problem (/thread-7234.html)



Javascript calendar problem - El Forum - 03-31-2008

[eluser]Caelis[/eluser]
Hi there,

I've taken up coding with CodeIgniter again.
Yet i'm bumping into a small problem.

I want to use the js_calendar plugin on my pages.
But I would like to add events (stored in a database-table) to the calendar days.

Then when clicking the days that have events attached,
it should load a view without reloading the whole page.

Currently the js_calendar only allows to click on a date and store that in a text-field.

If someone could be so kind to point me in the right direction as to handle this problem?
I guess I'll have to write additional javascript procedures but how do I make sure I won't have to rewrite everything when a new CodeIgniter version comes out...

Any help will be greatly appreciated! Smile


Javascript calendar problem - El Forum - 03-31-2008

[eluser]Pascal Kriete[/eluser]
Hmm, what I would do here is use the convenience function that CI already gives you: insert_date . I believe it's commented out by default, and I would leave it that way and make my own by adding it to the bottom of the script such as this:
Code:
<?php echo js_calendar_script('my_form');  ?>

<script type="text/javascript" charset="utf-8">
<!--
    function insert_date(cal)
    {
        cal = eval(cal);

        var date = cal.date_str();
        var parts = date.split('-');
        
        var year = parts[0];
        var month = parts[1];
        var day = parts[2];
        
        // Ajax request using the method of your choice
        /* ajax.request('my/date/controller/'+year+'/'+month+'/'+day, function() {
            method: 'post',
            onComplete: function(transport) {
                $('event_info_div')[removed] = transport.responseText;
            }
        });
        */
    }
//-->
</script>

Now, anytime a day on the calendar is clicked, the ajax request is run.

The controller receives the year, month, and day as it's argument and checks the db for an available event. If such an event exists it returns a view with the event data. If it doesn't exist it returns a view with a form to create an event. And if you're really slick that form will also ajax submit and re-update the div as a live preview of the event you just created.

Good luck.


Javascript calendar problem - El Forum - 03-31-2008

[eluser]Caelis[/eluser]
Oh my god, this is awesome!
Not only the framework is fast,
even the forum is fast! (well, the community I mean!)

I'm going to try this later this evening but this all looks so logic!
I'll reply the result later!

Thanks in advance man!


Javascript calendar problem - El Forum - 03-31-2008

[eluser]Caelis[/eluser]
almost managed to get it working Smile
adapted it a little bit more to my needs...

one final thingie though...
this way of working does not allow me to only make the cells clickable
that have events.
I'm not proficient enough in javascript to program this,
but I'm guessing I would have to rewrite the main procedure that builds the calendar on the page
in order to see if events are attached to the days or not?


Javascript calendar problem - El Forum - 04-01-2008

[eluser]Pascal Kriete[/eluser]
How would you add events if they aren't clickable?

Regardless, the easiest solution is to modify the cell_highlight function. This function could check if the day has an event and highlight it red if it didn't. The biggest problem here is that it gets sluggish on slow connections.

All the other solutions need more tinkering, but javascript isn't too hard Smile .


Javascript calendar problem - El Forum - 04-01-2008

[eluser]Caelis[/eluser]
I probably did not express myself correctly..

It would work like this:
On the database a table called events (with a date-field).

In the CMS, a page where events can be inserted, deleted or updated in the table.

Then on the homepage itself, the javascript-calendar with the date-cells, that have events, high-lighted
and clickable. When you click on the cell, a div needs to be displayed with the events of that day.

The first part and the final part of this problem are solved... now I need to make the part where the date-cells, that have events, are high-lighted and clickable.

I suppose I will need to make an alternative function that constructs my javascript-calendar?
Or any other suggestions?


Javascript calendar problem - El Forum - 04-08-2008

[eluser]Caelis[/eluser]
no help? :p