Как реализовать календарь, с возможностью ввода

Добрый день.
Прошу совета, как реализовать календарь, с в каждой дате.
Т.е. у меня есть график поставок, который люди заполняют. Я хочу, чтобы они видели сразу календарь, и при нажатии на дату куда они хотят вставить поставку, появлялось поле, в которое они вобьют объем. После того, как они вобъют весь график в календарь(выберут 10-20 дат, которые могут быть в разные месяцы, и вобьют в них объемы), нажимают на кнопку отправить и там уже обработчик заведет все в базу данных(с этим проблем нет).
Подскажите, используя какую библиотеку такое было бы проще всего реализовать(Jquery UI Datepicker?)
Заранее благодарен.

P.S. Нашел похожий скрипт, на то, что мне надо (Booking Calendar PRO (jQuery Plugin), но он платный $7 и такое ощущение, что заточен под wordpress, а перетачивать не очень хочется codecanyon.net/item/booking-calendar-pro-jquery-plugin/full_screen_preview/244645?ref=themespotters
GrinRom
GrinRom
06 марта 2015, 08:37
modx.pro
1
2 077
0

Комментарии: 5

Fducho Santos
Fducho Santos
06 марта 2015, 12:12
+1
Подскажите, используя какую библиотеку такое было бы проще всего реализовать(Jquery UI Datepicker?)
Посмотрите: fullcalendar.io/
    GrinRom
    GrinRom
    06 марта 2015, 12:24
    0
    Сейчас попробуем, спасибо
      GrinRom
      GrinRom
      06 марта 2015, 14:12
      0
      Отличный вариант оказался, спасибо большое)
      Alexander V
      Alexander V
      06 марта 2015, 13:07
      0
      getuikit.com/docs/datepicker.html не знаю, подойдёт или нет, но это самый простой вариант
        GrinRom
        GrinRom
        06 марта 2015, 14:12
        0
        Может кому пригодится)))
        dayClick: function (date, jsEvent, view) {
                    // alert ($(this).closest('.tr_calendar').data('id'));

                    if ($(this).data('disabled') !== '1') {
                        var date = date.format();
                        $(this).data({'disabled':'1'});
                        $(this).append('' +
                        '<form>Объем ожидаемой поставки: <div class="input-append">' +
                        '<input class="add_graph_input" type="text" name="value"/><span class="add-on">м³</span></div>' +
                        '<input type="hidden" name="id_post" value="' + $(this).closest('.tr_calendar').data('id') +
                        '"><input type="hidden" name="date" value="' + date + '"></form>');

                        //alert('Clicked on: ' + date.format());

                        //alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

                        //alert('Current view: ' + view.name);

                        // change the day's background color just for fun
                        $(this).css('background-color', 'lightblue');
                        $(this).find('.add_graph_input').focus();
                    } else {
                        $(this).find('.add_graph_input').focus();
                    }
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          5