Использование fullCalendar в Django

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

Я хочу, чтобы в моем приложении Django отображался недельный календарь, в котором отображаются сдвиги в базе данных. Ниже приведена модель сдвига.

class Shift(models.Model): owner = models.ForeignKey(settings.AUTH_USER_MODEL, related_name='shifts', blank=True, null=True) # A shift may not have an owner. # Choices for fields. Add more choices as necessary. DAYS = ( ('M', 'Monday'), ('TU', 'Tuesday'), ('W', 'Wednesday'), ('TH', 'Thursday'), ('F', 'Friday'), ('SA', 'Saturday'), ('SU', 'Sunday'), ) day_of_the_week = models.CharField(max_length=2, choices=DAYS, blank=True, null=True) start_date = models.DateField(blank=True, null=True) end_date = models.DateField(blank=True, null=True) start_time = models.TimeField(default='12:00:00') end_time = models.TimeField(default='14:00:00') hours = models.DurationField(editable=False) activated = models.BooleanField(verbose_name='Activate', default=False) sale_status = models.BooleanField(verbose_name='Activate sale', default=False) ... def save(self, *args, **kwargs): # Overwrite save() to calculate and save the duration of a shift. temp_date = datetime(1,1,1,0,0,0) self.hours = datetime.combine(temp_date, self.end_time) - datetime.combine(temp_date, self.start_time) super(Shift, self).save(*args, **kwargs) 

Администратор создает сдвиги и назначает владельцев сдвигам. Как только владелец назначен, владелец может продать смену, которая изменит sale_status=False на sale_status=True . Тогда другие пользователи могут купить смену, сменив owner перехода на покупателя и sale_status на False . В идеале эти действия (продажи и покупки) могут выполняться через календарь, нажимая на смену. Это означает, что календарь должен отображать все смены, activated=True .

Я уже давно копался в этом и решил использовать FullCalendar . Вперед, я знаю, что мне нужно изменить views.py для представления AJAX и создать шаблон для календаря, но я не уверен, как это сделать. Теперь мой шаблон выглядит так:

 <head> <link rel='stylesheet' href='fullcalendar/fullcalendar.css' /> <script src='lib/jquery.min.js'></script> <script src='lib/moment.min.js'></script> <script src='fullcalendar/fullcalendar.js'></script> </head> <div id="calendar"></div> <script type='text/javascript'> $(document).ready(function() { // page is now ready, initialize the calendar... $('#calendar').fullCalendar({ // put your options and callbacks here events: "shifts/eventsFeed", weekends: false, editable: false, }) }); </script> 

Это, очевидно, неправильно (не использует язык шаблонов Django, событияFeed не реализованы и т. Д.), Но я не уверен, как идти отсюда.

Любая помощь, особенно с фрагментами кода, будет с благодарностью оценена.

Благодаря!

Изменить : таким образом, мне удалось загрузить календарь с помощью следующих кодов:

 // in views.py def view_shifts(request): """ View for displaying activated shifts in a weekly calendar format. """ activated_shifts = Shift.objects.filter(activated=True) # Get all the activated shifts. shifts = [] # place holder for shift in activated_shifts: temp = OrderedDict() temp['id'] = shift.id temp['title'] = shift.title temp['start'] = str(shift.start_date) + 'T' + str(shift.start_time) temp['end'] = str(shift.end_date) + 'T' + str(shift.end_time) shifts.append(temp) calendar_config_options = {'header': { 'left': 'prev,next today', 'center': 'title', 'right': 'month,agendaWeek,agendaDay' }, 'defaultView': 'agendaWeek', 'editable': 'True', # View only. 'events': json.dumps(shifts), 'firstDay': 1 # Week starts on Monday. } return render(request, 'shifts/full_calendar.html', {'calendar_config_options': calendar_config_options}) 

Я также добавил название поля в свой Shift . Это просто строковое представление self.owner . Мой шаблон, называемый calendar_init.html , выглядит следующим образом:

 <script type="text/javascript"> $(document).ready(function() { // Page is ready. // Initialize the calendar. $('#calendar').fullCalendar({{ calendar_config_options }}); }); </script> 

Теперь, когда шаблон визуализируется, я получаю следующее:

 <!DOCTYPE html> <head> <title>Shifts</title> ... <script type="text/javascript"> $(document).ready(function() { // Page is ready. // Initialize the calendar. $('#calendar').fullCalendar({'firstDay': 1, 'header': {'right': 'month,agendaWeek,agendaDay', 'center': 'title', 'left': 'prev,next today'}, 'defaultView': 'agendaWeek', 'editable': True, 'events': '[{"id": 61, "title": "Unclaimed", "start": "2015-07-21T14:00:00", "end": "2015-07-21T16:00:00"}, {"id": 62, "title": "slee17", "start": "2015-07-21T12:00:00", "end": "2015-07-21T14:00:00"}]'}); }); </script> </head> <body> <div id="calendar"></div> 

Однако календарь по-прежнему не загружен сменой. Я попытался использовать json.loads(json.dumps(shifts)) вместо json.dumps(shifts) а также попытался использовать вспомогательные функции из http://robotfantastic.org/serializing-python-data-to-json -some-edge-cases.html . Не загрузили календарь со сдвигами. Что я здесь делаю неправильно? (Календарь по-прежнему загружается, его конфигурация настроена так, как я уже настроил, но календарь пуст.)

Кроме того, два небольших вопроса: 1) когда я говорю 'edtiable': True вместо 'editable': 'True' , страница пуста, без ошибок. Почему это так? Я также пробовал делать 'weekends'='False' , который по-прежнему показывает календарь с выходными, поэтому календарь явно не настроен правильно, когда дело доходит до булевых. Однако я не знаю, почему, поскольку другие настройки конфигурации (например, header , defaultView и firstDay ), похоже, работали нормально. 2) Я использовал OrderedDict (), потому что у меня было подозрение, что порядок имеет значение при попытке загрузить events в календарь, но я не уверен, что это правда. Могу ли я просто использовать обычный словарь Python?

Вот основной обзор того, что вам нужно сделать. Создайте представление, которое возвращает данные JSON, как ожидает его полный календарь. Это довольно просто сделать. Вы можете создать пользовательский интерфейс вручную с помощью JsonResponse или использовать Django Rest Framework. Если вы не создаете целый API, я бы использовал JsonResponse.

Что касается формата JsonResponse, вам нужно указать как start и title . Вы можете найти другие возможные поля здесь в документах полного календаря.

Пример:

 from django.http import JsonResponse def example(request): data = [ { 'title': 'event1', 'start': '2010-01-01' }, { 'title': 'event2', 'start': '2010-01-05', 'end': '2010-01-07' } ] return JsonResponse(data, safe=False)