Использование 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?

    One Solution collect form web for “Использование fullCalendar в Django”

    Вот основной обзор того, что вам нужно сделать. Создайте представление, которое возвращает данные 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) 
    Python - лучший язык программирования в мире.