2015-12-25 1 views
-2

Мне было интересно, как я могу вручную закодировать javascript на начало и конец даты события и показать его в календаре с помощью «span». Так же, как это:fullcalendar multi-day span of event how (код javascript)

[промежуток от 27 декабря (дата начала) до 30 декабря (дата окончания) - пожалуйста, нажмите на ссылку, чтобы увидеть изображение образца http://i.stack.imgur.com/NlvRG.png

из моего яваскрипта кода, я уже может получить дату начала:

dayClick: function(date, event, view) { 
     currentDate = date.format(); 
     // Open modal to add event 
     modal({ 
      // Available buttons when adding 
      buttons: { 
       add: { 
        id: 'add-event', // Buttons id 
        css: 'btn-success', // Buttons class 
        label: 'Add' // Buttons label 
       } 
      }, 
      title: 'Add Event (' + date.format() + ')' // Modal title 
     }); 
    }, 

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

$('#calendar').fullCalendar({ 


header: { 
    left: 'prev,next today', 
    center: 'title', 
    right: 'month,agendaWeek,agendaDay' 
}, events: [ 
    { 
     title: 'Birthday Party', 
     start: '2014-09-15T10:00:00', 
     end: '2014-09-17T06:00:00' 
    } 
] }); 

Я был на самом деле интересно, как я мог бы получить и дату начала и дату окончания динамически из формы и в базу данных внутри JavaScript.

Вот мой HTML файл (как я бегу его на CodeIgniter, он сохраняется в виде файла PHP (это мнение):

<div class="container"> 
     <div class="row clearfix"> 
      <div class="col-md-12 column"> 
        <div id='calendar'></div> 
      </div> 
     </div> 
    </div> 
    <div class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
        <h4 class="modal-title"></h4> 
       </div> 
       <div class="modal-body"> 
        <div class="error"></div> 
        <form class="form-horizontal" id="crud-form"> 
         <div class="form-group"> 
          <label class="col-md-4 control-label" for="title">Title</label> 
          <div class="col-md-4"> 
           <input id="title" name="title" type="text" class="form-control input-md" /> 
          </div> 
         </div> 

         <div class="form-group"> 
          <label class="col-md-4 control-label" for="title">Start date:</label> 
          <div class="col-md-4"> 
           <input id="start_date" name="start_date" type="text" class="form-control input-md" /> 
          </div> 
         </div> 

         <div class="form-group"> 
          <label class="col-md-4 control-label" for="title">End Date:</label> 
          <div class="col-md-4"> 
           <input id="end_date" name="end_date" type="text" class="form-control input-md" /> 
          </div> 
         </div> 


         <div class="form-group"> 
          <label class="col-md-4 control-label" for="description">Description</label> 
          <div class="col-md-4"> 
           <textarea class="form-control" id="description" name="description"></textarea> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label class="col-md-4 control-label" for="color">Color</label> 
          <div class="col-md-4"> 
           <input id="color" name="color" type="text" class="form-control input-md" readonly="readonly" /> 
           <span class="help-block">Click to pick a color</span> 
          </div> 
         </div> 
        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

+0

Хотелось бы видеть HTML. Я полагаю, вы динамически создаете календарь с помощью PHP или какого-либо другого серверного языка, не так ли? В таком случае создание хорошей HTML-разметки для вашего JavaScript может многое помочь, например, вы можете дать атрибуты span 'data-start' и' data-end', чтобы легко получить их через JavaScript. Есть много вариантов, но, к сожалению, мне нужно идти сейчас. Кто-то еще поможет вам с большим количеством времени, но, по крайней мере, здесь у вас есть идея. – Zeke

+0

Благодарим за отзыв! html не содержит много, он просто содержит модальный, когда я нажимаю день или событие. CRUD для fullcalendar уже полностью функциональен, просто я не могу создать диапазон, в который я введу дату начала и дату окончания. Функциональность календаря полностью зависит от javascript, crud зависит от контроллера и модели. – Laurel

+0

Пожалуйста, добавьте свой код HTML и PHP. –

ответ

1

Так что, похоже, как ваш проблема заключается в том, что объект JSON, возвращенный URL имеет нераспознаваемые данные для fullCalendar Таким образом, вы будете получать события, как это:.

events: base_url+'Calendar/view_tours', 

И чан e столбцы вашей базы данных от tour_id до id, tour_name до title, start_date до start и end_date до end. Это создаст правильный объект JSON.