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/calenda

Answer 1

I really don't see the complication about this.......

If you just use the jQuery UI DataPicker and modify the js file so it stores the days in a slider, then put the data in a jQuery UI Slider and you should have almost what you require.

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!

Answer 3

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
});