Web app - slider showing days of the months feature

Question

For a school project we have to build a web app. I'll be creating something where people can keep track of their classes, their homework, and their free time. A planner/calendar. (I'm making it sound really lame here but hey, I'm tired and English isn't my first language ;) )

I'll be working in CodeIgniter for the PHP logic, combined with the usual.. CSS, jQuery, mySQL. PHP is a requirement for the course; I chose to do this in CI because well.. I wanted to learn the framework. We kind of have to show off what we can do at this point of our 'school career'.

Anyway, I would like to ask for some insights regarding a feature I want to implement. At the top of my page, I would like to show a bar which contains the days of the month. Below the day number, I would be showing how many tasks are added on that day by means of some dots. When the user clicks previous or next, I want to show the previous/next month's days. I also want some sort of slider underneath this box which the user can use to slide left and right, and cycle through the days that way. I hope that made sense?

EDIT 2: I want the slider to be dynamic. If the user slides to the previous or next months, or clicks the buttons, I want it to load the days of the previous/next months and show those. Also, say we're at the 26th of a month, the slider would have to show something like 10-31 of this month AND 1-10 of the next month. I suppose I'll also have to change my month indication (not like in the image here) so a user knows when another month starts (I'll show them the name of the month).

Here's a picture (don't mind the day numbers being messed up, I was lazy doing that correctly in Photoshop. will fix that tomo):

I've been looking at the jQuery UI sliders. I suppose I'd have to grab the number of days from a database or by using PHP? I guess the cal_days_in_month function could come in handy here. When the user clicks on the arrows or slides left or right, I don't want the page to refresh. Should I go with ajax calls there? I'm not quite sure how to implement this, to be honest. The numbers are also links to a calendar type of view which shows underneath this bar. Could I possibly use the CI Calendar class for this? Or is it more for full-fledged google calendar-type of calendars? I thought this screencast could perhaps be useful?

If possible, could someone please provide some insights on how to start working on this and which plugins/etc I could perhaps use? I'm not sure where to start, to be honest. I'm sure I can work this out somehow, but I guess it'd be nice to get a kickstart by means of some help here. The main problem I'm seeing is the slider/next/previous thing and loading in the previous/next month's days.

Thanks in advance.

EDIT: I realise some people might say/think 'OMG, why don't you just use the skills you have instead of trying something you have to ask us about!'. Well, this is because I actually want to learn something while doing this project. Keep in mind, I'm not asking for lines of code here, I'm just asking for some insight on where to start and what stuff to use; perhaps little snippets that can help me out. Thanks.

UPDATE:

I got a very basic 'day bar' working. Still without a slider, nor do the previous and next buttons work, but hey.. at least it fills it in dynamically. It shows the 5 days previous to the current day, then this month till the end. Whatever is left to fill in gets filled with days of the next month. Quite basic. However, I do have a couple of questions!

Since someone told me yesterday that I was breaking design patterns by doing some stuff the way I was doing it, I'm extremely paranoid about the way I'm working now and I would really like some feedback from 'CodeIgniter pro's'. To fill in the 'day bar', I created a helper with a couple of methods. (One method to dynamically fill that 'month year' thing you see in the picture, another method init() which loads the list of the days, like I explained before). I loaded this helper in the controller and I'm now using the methods in my view:

    <ul>
        <?php
            init($current_day_of_month, $current_month, 
                          $current_year, $days_in_current_month, $show_history);
        ?>
    </ul>

The helper then echoes my day values in my view. Is this good or bad practice? I kept thinking the wrong way when I wanted to start writing the code for this.. I wanted to have a function somewhere in my controller and then call it from the view, but I read that I shouldn't be doing it like that.. that I had to reverse my logic. I find it hard to wrap my head around the fact that I have to do this by sending arrays of data to my view (from my controller), so I opted for creating the helper. Good? Bad? Any tips, resources I should read, screencasts I should watch? Thanks a bunch.

Answer 1

This seems pretty straight forward to me. I don't really have time to write the whole thing now. but heres what steps I would take.

1) create a model which gets all the tasks for a month, and uses that to create an array of {date}=>{num_tasks} e.g. {'1'=>3,'2'=>1, "3"=>0, ...}. //hint: use a regular SQL count OR just loop thru and tally them.

2) create a controller function to return this array as JSON. Something like this:

public function get_month($month, $year) {
    $tasks = $this->task_model->get_each_days_taskcount($month, $year);
    $json = json_encode ($tasks);
    echo $json;
}

3) write a html page which has a javascript function to call this controller function with AJAX. Something like:

function fill_calendar(month, year) {
$.get('some_controller/get_month/' + month + '/' + year, function(data) {
    // parse the JSON then
    // do something with the data here like $('#calendar').append();
});
}

4) Load this month with something like this:

$(function() {
    var d = new Date();
    var tmonth = d.getMonth();
    var tyear = d.getFullYear();
    fill_calendar(tmonth, tyear); // populate with this month
});

5) make the prev and next buttons work with something like

$('#prev_button').click(function() {
    fill_calendar(current_month - 1 , tyear);
    // you will probly need to make this calculation smarter than just minus 1
});

Answer 2

The key thing if you want your system to be dynamic is to make the data transmission short. So using Ajax, as icchanobot says, send the request for a specific month. Use get:

'some_controller?m=' + month + '&y=' + year

or even:

'some_controller?next' // or previous

The controller has to get data for the correct month, but not send back the whole month - only the data needed for your display, in a format as tight as possible. You could query how many events run on which days of that month:

SELECT day, count(event) FROM event_table WHERE DATE BETWEEN 'yyyy-mm-01' AND 'yyyy-mm-31' GROUP BY day ORDER BY day;

query needs adapting to your data structure - use a function to get the day from a complete date, and maybe use indexes so that the query returns the data fast.

Then the controller returns a string as short as you can make it, of the relevant data sorted in day order:

1=3,15=1,29=2

That would mean "1st=3 events, 15th=1 event, 29=2 events". If you don't want the number of events then "1,15,2" is enough. Empty days aren't transmitted.

the data is received by an ajax event handler on your web page and you parse it by using split, then populate the slider by using a loop.

Your biggest drag, in a very dynamic application, is if it slows down when you repeatedly ask for the next month and the next. A few tricks:

• Update the display while waiting for data; you send your query, and while it is being processed, you can slide the month into view, with the correct number of days, looking disabled so that the user knows immediately that they will get their data, and that it is in progress. Then when the data comes, populate and highlight. It will feel instant though it isn't.
• Avoid processing information the user doesn't want anymore. If somebody clicks "next" three times, they want the data for july, not may, june and july. Don't process what you don't display.
• Cache data you've already asked, unless you want the system to return dynamically to the server for the latest state of the calendar. You've asked for the data for May and June, but not displayed it; when the user hits "back", don't ask for that data again.

Good luck!