Веб-приложение - слайдер, показывающий функции дней месяца

Для школьного проекта нам нужно создать веб-приложение. Я буду создавать что-то, где люди смогут отслеживать свои занятия, их домашнюю работу и свободное время. Планировщик/календарь. (Я заставляю его звучать очень слабо, но эй, я устал, а английский не является моим первым языком;))

Я буду работать в CodeIgniter для логики PHP, в сочетании с обычным.. CSS, jQuery, mySQL. PHP необходим для курса; Я решил сделать это в CI, потому что хорошо.. Я хотел изучить структуру. Мы вроде как должны показать, что мы можем сделать в этот момент нашей "школьной карьеры".

В любом случае, я хотел бы попросить кое-какие идеи относительно функции, которую я хочу реализовать. В верхней части моей страницы я хотел бы показать панель, содержащую дни месяца. Под номером дня я бы показал, сколько задач добавлено в этот день с помощью некоторых точек. Когда пользователь нажимает предыдущий или следующий, я хочу показать дни предыдущего/следующего месяца. Я также хочу, чтобы какой-то слайдер находился под этим полем, который пользователь может использовать для скольжения влево и вправо, и цикл через эти дни. Надеюсь, это имело смысл?

ИЗМЕНИТЬ 2: Я хочу, чтобы ползунок был динамическим. Если пользователь переходит в предыдущий или следующий месяцы или нажимает кнопки, я хочу, чтобы он загружал дни предыдущего/следующего месяца и показывал их. Кроме того, скажем, что мы на 26-м месяце, слайдер должен будет показать что-то вроде 10-31 месяца и 1-10 следующего месяца. Полагаю, мне также придется изменить показатель месяца (не так, как на изображении здесь), поэтому пользователь знает, когда начнется другой месяц (я покажу им название месяца).

Вот картинка (не против того, чтобы число дней было испорчено, я лениво делал это правильно в Photoshop, исправил томо):

Я смотрю на слайдеры jQuery UI. Я полагаю, мне нужно было бы захватить количество дней из базы данных или с помощью PHP? Я думаю, что функция cal_days_in_month может пригодиться здесь. Когда пользователь нажимает на стрелки или слайды влево или вправо, я не хочу, чтобы страница обновлялась. Должен ли я пойти с аякс-звонками? Честно говоря, я не совсем уверен, как реализовать это. Цифры также являются ссылками на вид календаря, который отображается под этой панелью. Могу ли я использовать класс CI Calendar для этого? Или это больше подходит для полноценных календарей календаря Google? Я думал, что этот скринкаст может быть полезен?

Если возможно, может кто-то, пожалуйста, дать представление о том, как начать работать над этим и какие плагины /etc я мог бы использовать? Честно говоря, я не знаю, с чего начать. Я уверен, что смогу это сделать, но я думаю, было бы неплохо получить кикстарт с помощью какой-то помощи здесь. Основная проблема, которую я вижу, - это слайдер/следующая/предыдущая вещь и загрузка в дни предыдущего/следующего месяца.

Спасибо заранее.

EDIT: Я понимаю, что некоторые люди могут сказать/подумать "OMG, почему бы вам просто не использовать навыки, которые у вас есть, вместо того, чтобы пытаться просить о нас?". Ну, это потому, что я действительно хочу что-то узнать во время этого проекта. Имейте в виду, я здесь не прошу ввести код кода, я просто прошу прояснить, с чего начать и какие вещи использовать; возможно, небольшие фрагменты, которые могут помочь мне. Спасибо.

UPDATE:

У меня очень простой "дневной бар". Все еще без слайдера, и не работают предыдущие и следующие кнопки, но эй... по крайней мере, он заполняет его динамически. Он показывает 5 дней до текущего дня, затем в этом месяце до конца. Все, что осталось заполнить, заполняется днями следующего месяца. Довольно простой. Однако у меня есть пара вопросов!

Так как вчера кто-то сказал мне, что я нарушал шаблоны дизайна, делая некоторые вещи так, как я это делал, я очень параноик по поводу того, как я работаю сейчас, и мне действительно хотелось бы получить обратную связь от "CodeIgniter pro's", Чтобы заполнить "дневную панель", я создал помощника с несколькими методами. (Один из методов динамического заполнения этого "месячного года", который вы видите на картинке, другой метод init(), который загружает список дней, как я уже объяснял ранее). Я загрузил этот помощник в контроллер, и теперь я использую методы на мой взгляд:

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

Затем помощник перекликается с моими дневными значениями. Это хорошая или плохая практика? Я продолжал думать не так, когда хотел начать писать код для этого. Я хотел иметь функцию где-то в своем контроллере, а затем вызывать ее из представления, но я читал, что я не должен так делать. что мне пришлось отменить свою логику. Мне трудно обернуть голову тем фактом, что я должен сделать это, отправив массивы данных на мой взгляд (из моего контроллера), поэтому я решил создать помощника. Хорошо? Плохо? Любые советы, ресурсы, которые я должен прочитать, скринкасты, которые я должен посмотреть? Спасибо, куча.

Ответ 1

Главное, если вы хотите, чтобы ваша система была динамичной, заключается в том, чтобы сделать передачу данных коротким. Таким образом, используя Ajax, как говорит icchanobot, отправьте запрос на определенный месяц. Использовать get:

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

или даже:

'some_controller?next' // or previous

Контроллер должен получать данные за правильный месяц, но не отправлять обратно весь месяц - только данные, необходимые для вашего дисплея, в формате, максимально возможном. Вы можете запросить, сколько событий выполняется в какие дни этого месяца:

SELECT day, count (событие) FROM event_table ГДЕ ДАТА МЕЖДУ "yyyy-mm-01" И "yyyy-mm-31" GROUP BY day ORDER BY day;

требуется адаптация к вашей структуре данных - используйте функцию, чтобы получить день с полной даты и, возможно, используйте индексы, чтобы запрос быстро возвращал данные.

Затем контроллер возвращает строку как можно короче, из соответствующих данных, отсортированных в дневном порядке:

1 = 3,15 = 1,29 = 2

Это означало бы "1st = 3 события, 15th = 1 событие, 29 = 2 события". Если вам не нужно количество событий, то "1,15,2" достаточно. Пустые дни не передаются.

данные принимаются обработчиком событий ajax на вашей веб-странице, и вы анализируете его с помощью split, а затем заполняете ползунок с помощью цикла.

Ваше самое большое перетаскивание в очень динамичном приложении - это если оно замедляется, когда вы повторно запрашиваете следующий месяц и следующий. Несколько трюков:

Обновление отображения во время ожидания данных; вы отправляете свой запрос, и пока он обрабатывается, вы можете сдвинуть месяц в поле зрения с правильным количеством дней, считая отключенным, чтобы пользователь сразу узнал, что они будут получать свои данные, и что он выполняется. Затем, когда данные поступают, заполняйте и выделяйте. Он будет чувствовать себя мгновенно, хотя это не так.
Избегайте обработки информации, которую пользователь больше не хочет. Если кто-то нажимает "следующий" три раза, они хотят получить данные за июль, а не июнь, июль. Не обрабатывайте то, что вы не видите.
Данные кэша, которые вы уже задали, если вы не хотите, чтобы система динамически возвращалась на сервер для последнего состояния календаря. Вы запросили данные за май и июнь, но не отобразили их; когда пользователь нажимает "назад", не запрашивайте эти данные снова.

Удачи!

Ответ 2

Это кажется мне довольно прямым. У меня нет времени писать все это сейчас. но вот какие шаги я предприму.

1) создать модель, которая получает все задачи в течение месяца и использует ее для создания массива {date}=>{num_tasks}, например. {'1'=>3,'2'=>1, "3"=>0, ...}.//hint: используйте обычный счетчик SQL или просто зацикливайте их и суммируйте их.

2) создайте функцию контроллера, чтобы вернуть этот массив как JSON. Что-то вроде этого:

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

3) напишите html-страницу, которая имеет функцию javascript для вызова этой функции контроллера с помощью AJAX. Что-то вроде:

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) Загрузите в этом месяце что-то вроде этого:

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

5) сделайте предыдущие и следующие кнопки работать с чем-то вроде

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

Ответ 3

Я действительно не вижу осложнений по этому поводу.

Если вы просто используете jQuery UI DataPicker и изменяете файл js, чтобы он хранил дни в слайдере, тогда поместите данные в слайдер jQuery UI и вы должны иметь почти то, что вам нужно.