title: Fullcalendar in Django - multiple calendars
body: <p>I suppose that this is a simple task, but I just can't figure it out on my own. </p>
  
  <p>I have a Calendar model, Events model, and CalendarGroups model, and a form, with the Event model. </p>
  
  <p>What I need, is a calendar selection, during the event creation. </p>
  
  <p>So, the User wants to add an event and to select a calendar for that event, and the event will be displayed only on that calendar.</p>
  
  <p>For now, I made two calendars from the admin panel, and I can render those two, and they have different ID's, which I can see from the page source.</p>
  
  <p>But when I try to add an event, and when I choose a calendar with ID = 1 for example, the event gets rendered on both calendars(needs to be rendered only on the calendar with ID=1).</p>
  
  <p>This is my models.py : </p>
  
  <pre><code>class CalendarGroups(models.Model):
      GRP_CALS = (
          ('Optika', 'Optika'),
          ('Bakar', 'Bakar'),
          ('DTH', 'DTH'),
          ('Supernova', 'Supernova'),
          ('Test', 'Test'),
      )
      name = models.CharField(max_length=155, choices=GRP_CALS, blank=True, null=True)
  
      def __str__(self):
          return self.name
  
      class Meta:
          verbose_name = 'Calendar Group'
          verbose_name_plural = 'Calendar Groups'
  
  #####################################################################################
  class Calendar(models.Model):
      name = models.CharField(max_length=155, blank=True, null=True)
      created_by = models.ForeignKey(User, on_delete=models.CASCADE, null=True)
      date_created = models.DateTimeField(auto_now_add=True)
      group = models.ForeignKey(CalendarGroups, on_delete=models.CASCADE)
  
      def __str__(self):
          return self.name
  
      class Meta:
          verbose_name = 'Calendar'
          verbose_name_plural = 'Calendars'
  
  #####################################################################################
  class Events(models.Model):
      STATUS = (
          ('zakazan', 'Zakazan'),
          ('otkazan', 'Otkazan')
      )
  
      event_id = models.AutoField(primary_key=True)
      event_name = models.CharField(max_length=255, null=True, blank=True)
      added_by = models.ForeignKey(User, on_delete=models.DO_NOTHING)
      event_comment = models.TextField(null=True, blank=True)
      status = models.CharField(max_length=155, choices=STATUS)
      zakazan = models.DateTimeField(auto_now_add=True)
      start_date = models.DateTimeField(null=True, blank=True)
      end_date = models.DateTimeField(null=True, blank=True)
      opp_eluid = models.IntegerField(blank=True, null=True)
  
      calendar = models.ForeignKey(Calendar, on_delete=models.CASCADE, blank=False, null=True)
  
      class Meta:
          verbose_name = 'Event'
          verbose_name_plural = 'Events'
  
      def __str__(self):
          return str(self.event_name)
  
  </code></pre>
  
  <p>This is my views.py : </p>
  
  <pre><code>def events(request):
      all_events = Events.objects.all()
      get_event_types = Events.objects.only('event_type')
      calendars = Calendar.objects.all()
  
      if request.GET:
          event_arr = []
          if request.GET.get('event_type') == "all":
              all_events = Events.objects.all()
          else:
              all_events = Events.objects.filter(event_type__icontains=request.GET.get('event_type'))
  
          for i in all_events:
              event_sub_arr = {}
              event_sub_arr['id'] = i.event_id
              event_sub_arr['calendar'] = i.calendar
              event_sub_arr['calendar_id'] = i.calendar.id
              event_sub_arr['title'] = i.event_name
              start_date = datetime.strptime(str(i.start_date.date()), "%Y-%m-%dT%H:%M:%S").strftime("%Y-%m-%dT%H:%M:%S")
              end_date = datetime.strptime(str(i.end_date.date()), "%Y-%m-%dT%H:%M:%S").strftime("%Y-%m-%dT%H:%M:%S")
              event_sub_arr['start'] = start_date
              event_sub_arr['end'] = end_date
              event_arr.append(event_sub_arr)
          return HttpResponse(json.dumps(event_arr))
  
      context = {
          "calendars": calendars,
          "events": all_events,
          "get_event_types": get_event_types,
  
      }
      return render(request, 'main/selectable.html', context)
  
  
  def add_event(request, pk):
      opp = get_object_or_404(OpportunityList, pk=pk) # This is the lead which will be schaduled for. Nothing to do with this question.
      events = Events.objects.all() # All the events scheduled so far.
  
      user = User.objects.get(username=request.user)
      opp_locked = get_object_or_404(Locked, pk=pk) # Locked lead. Just ignore it.
      form = ZakaziForma() # Scheduling form(simple form with the model fields)
  
      if request.method == 'POST':
          form = ZakaziForma(request.POST or None)
  
          if form.is_valid():
              event = Events.objects.create(
                  start_date=form.cleaned_data['start_date'],
                  end_date=form.cleaned_data['end_date'],
                  event_name=form.cleaned_data['event_name'],
                  added_by=user,
                  event_comment=form.cleaned_data['event_comment'],
                  status=form.cleaned_data['status'],
                  zakazan=True,
                  opp_eluid=int(opp_locked.locked_eluid.eluid),
                  calendar=form.cleaned_data['calendar'],
              )
              opp_locked.is_locked = False
              opp_locked.zakazan = True
              opp_locked.save()
              event.save()
              messages.success(request, 'Uspešno ste zakazali termin za ' + opp_locked.locked_comment)
              return redirect('opportunity:optika')
      context = {
          'form': form,
          'opp': opp,
          'events': events
      }
      return render(request, 'opportunity/detalji/zakazi.html', context)
  </code></pre>
  
  <p>This is the form for adding events</p>
  
  <pre><code>from django import forms
  from tempus_dominus.widgets import DateTimePicker
  
  from .models import Events
  
  
  class ZakaziForma(forms.ModelForm):
      class Meta:
          model = Events
          fields = ['event_name', 'event_comment', 'status', 'start_date', 'end_date', 'calendar', 'opp_eluid']
  
          labels = {
              'event_name': 'Naziv Posla:',
              'event_comment': 'Komentar:',
              'status': 'Status:',
              'start_date': 'Početak:',
              'end_date': 'Završetak:',
              'calendar': 'Kalendar'
          }
  
          widgets = {
              'start_date': DateTimePicker(options={'useCurrent': True, 'collapse': False},
                                           attrs={'icon-toggle': True, }),
              'end_date': DateTimePicker(options={'useCurrent': True, 'collapse': False}),
              'opp_eluid': forms.HiddenInput()
          }
  </code></pre>
  
  <p>The html for adding events, with the form and calendar preview. Calendar preview doesn't work. It doesn't render at all. It renders the form only. </p>
  
  <pre><code>{% extends 'base.html' %}
  {% load crispy_forms_tags %}
  
  {% block title %} Zakazivanje {% endblock %}
  
  {% block content_row %}
      &lt;div style="display: flex;" class="flex-container"&gt;
  
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col"&gt;
                      &lt;form method="post" action="{% url 'main:add_event' opp.pk %}"&gt;
                          {{ form|crispy }}
                          {% csrf_token %}
                          &lt;button type="submit" class="btn btn-primary"&gt;Potvrdi&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container-fluid"&gt;
              {% if calendar %}
                  {% for cal in calendar %}
                      &lt;script&gt;
                          document.addEventListener('DOMContentLoaded', function () {
                              let calendarEl = document.getElementById('{{ cal.id }}');
                              //////////////////////////////////////////////////////////////////////////////////////////////
                              let calendar1 = new FullCalendar.Calendar(calendarEl, {
                                  minTime: "07:00:00",
                                  maxTime: "22:00:00",
                                  businessHours: {
                                      startTime: '08:00', // a start time (10am in this example)
                                      endTime: '21:00', // an end time (6pm in this example)
                                  },
                                  height: 'auto',
                                  locale: 'sr',
                                  plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
                                  defaultView: 'timeGridThreeDay',
                                  header: {
                                      left: 'today',
                                      center: '',
                                      right: 'dayGridWeek,timeGridThreeDay'
                                  },
                                  views: {
                                      timeGridThreeDay: {
                                          type: 'timeGrid',
                                          duration: {days: 3},
                                          buttonText: '3 Dana'
                                      }
                                  },
                                  navLinks: false, // can click day/week names to navigate views
                                  editable: false,
                                  eventLimit: true, // allow "more" link when too many events
                                  eventTextColor: 'black',
                                  events: [
                                      {% for i in events %}
                                          {
                                              title: "{{ i.event_name}}",
                                              start: '{{ i.start_date|date:"Y-m-d" }}T{{ i.start_date|time:"H:i" }}',
                                              end: '{{ i.end_date|date:"Y-m-d" }}T{{ i.end_date|time:"H:i" }}',
  
                                          },
                                      {% endfor %}
                                  ]
                              });
  
                              //////////////////////////////////////////////////////////////////////////////////////////////
                              calendar1.render();
                              //////////////////////////////////////////////////////////////////////////////////////////////
                          })
                          ;
                      &lt;/script&gt;
                  {% endfor %}
              {% endif %}
              &lt;style&gt;
  
                  .calendarMine {
                      max-width: 400px;
                      margin: 0 auto;
                  }
              &lt;/style&gt;
  
              &lt;div style="display: flex;" class="flex-container"&gt;
                  {% for cal in calendar %}
                      &lt;div class="calendarMine" id='{{ cal.id }}'&gt;&lt;/div&gt;
                  {% endfor %}
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  {% endblock content_row %}
  </code></pre>
  
  <p>This is my calendar page. Both calendars are rendered, but the events are on both calendars. </p>
  
  <pre><code>{% extends 'base.html' %}
  {% load static %}
  {% block title %} Kalendar {% endblock title %}
  
  
  
  {% block content_row %}
      &lt;!--------------------------------------------- FULLCALENDAR LINKS ----------------------------------------------&gt;
      {% include 'main/partials/_link_fullcalendar.html' %}
      &lt;!--------------------------------------------- FULLCALENDAR LINKS END ------------------------------------------&gt;
  
      {% if messages %}
          {% for message in messages %}
              &lt;div class="container-fluid"&gt;
                  &lt;div class="alert alert-success alert-dismissible"&gt;
                      &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
                      &lt;strong&gt;Uspešno!&lt;/strong&gt; {{ message }}
                  &lt;/div&gt;
              &lt;/div&gt;
          {% endfor %}
      {% endif %}
  
      {% if calendars %}
          {% for cal in calendars %}
              &lt;script&gt;
                  document.addEventListener('DOMContentLoaded', function () {
                      let calendarEl = document.getElementById('{{ cal.id }}');
                      //////////////////////////////////////////////////////////////////////////////////////////////
                      let calendar1 = new FullCalendar.Calendar(calendarEl, {
                          minTime: "07:00:00",
                          maxTime: "22:00:00",
                          businessHours: {
                              startTime: '08:00', // a start time (10am in this example)
                              endTime: '21:00', // an end time (6pm in this example)
                          },
                          height: 'auto',
                          locale: 'sr',
                          plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
                          defaultView: 'timeGridThreeDay',
                          header: {
                              left: 'today',
                              center: '',
                              right: 'dayGridWeek,timeGridThreeDay'
                          },
                          views: {
                              timeGridThreeDay: {
                                  type: 'timeGrid',
                                  duration: {days: 3},
                                  buttonText: '3 Dana'
                              }
                          },
                          navLinks: false, // can click day/week names to navigate views
                          editable: false,
                          eventLimit: true, // allow "more" link when too many events
                          eventTextColor: 'black',
                          events: [
                              {% for i in events %}
                                  {
                                      title: "{{ i.event_name}}",
                                      start: '{{ i.start_date|date:"Y-m-d" }}T{{ i.start_date|time:"H:i" }}',
                                      end: '{{ i.end_date|date:"Y-m-d" }}T{{ i.end_date|time:"H:i" }}',
  
                                  },
                              {% endfor %}
                          ]
                      });
                      //////////////////////////////////////////////////////////////////////////////////////////////
                      calendar1.render();
                      //////////////////////////////////////////////////////////////////////////////////////////////
                  })
                  ;
              &lt;/script&gt;
          {% endfor %}
      {% endif %}
  
      &lt;div style="display: flex;" class="container"&gt;
          {% for cal in calendars %}
              &lt;div class="container" id='{{ cal.id }}'&gt;&lt;/div&gt;
          {% endfor %}
      &lt;/div&gt;
  
      &lt;!---------------------------------------------- FULLCALENDAR SCRIPT-----------------------------------------------&gt;
      {% include 'main/partials/_fullcalendar_script.html' %}
      &lt;!---------------------------------------------- FULLCALENDAR SCRIPT END ------------------------------------------&gt;
  {% endblock %}
  
  </code></pre>
  
  <p>This is a page source:</p>
  
  <pre><code>&lt;script&gt;
                  document.addEventListener('DOMContentLoaded', function () {
                      let calendarEl = document.getElementById('1');
                      //////////////////////////////////////////////////////////////////////////////////////////////
                      let calendar1 = new FullCalendar.Calendar(calendarEl, {
                          minTime: "07:00:00",
                          maxTime: "22:00:00",
                          businessHours: {
                              startTime: '08:00', // a start time (10am in this example)
                              endTime: '21:00', // an end time (6pm in this example)
                          },
                          height: 'auto',
                          locale: 'sr',
                          plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
                          defaultView: 'timeGridThreeDay',
                          header: {
                              left: 'today',
                              center: '',
                              right: 'dayGridWeek,timeGridThreeDay'
                          },
                          views: {
                              timeGridThreeDay: {
                                  type: 'timeGrid',
                                  duration: {days: 3},
                                  buttonText: '3 Dana'
                              }
                          },
                          navLinks: false, // can click day/week names to navigate views
                          editable: false,
                          eventLimit: true, // allow "more" link when too many events
                          eventTextColor: 'black',
                          events: [
  
                                  {
                                      id: "57",
                                      calendar: "Test Kalendar",
                                      calendar_id: "1",
                                      title: "Test ID",
                                      start: '2020-01-14T12:00',
                                      end: '2020-01-14T13:00',
  
                                  },
  
                          ]
                      });
                      //////////////////////////////////////////////////////////////////////////////////////////////
                      calendar1.render();
                      //////////////////////////////////////////////////////////////////////////////////////////////
                  })
                  ;
              &lt;/script&gt;
  
              &lt;script&gt;
                  document.addEventListener('DOMContentLoaded', function () {
                      let calendarEl = document.getElementById('4');
                      //////////////////////////////////////////////////////////////////////////////////////////////
                      let calendar1 = new FullCalendar.Calendar(calendarEl, {
                          minTime: "07:00:00",
                          maxTime: "22:00:00",
                          businessHours: {
                              startTime: '08:00', // a start time (10am in this example)
                              endTime: '21:00', // an end time (6pm in this example)
                          },
                          height: 'auto',
                          locale: 'sr',
                          plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
                          defaultView: 'timeGridThreeDay',
                          header: {
                              left: 'today',
                              center: '',
                              right: 'dayGridWeek,timeGridThreeDay'
                          },
                          views: {
                              timeGridThreeDay: {
                                  type: 'timeGrid',
                                  duration: {days: 3},
                                  buttonText: '3 Dana'
                              }
                          },
                          navLinks: false, // can click day/week names to navigate views
                          editable: false,
                          eventLimit: true, // allow "more" link when too many events
                          eventTextColor: 'black',
                          events: [
  
                                  {
                                      id: "57",
                                      calendar: "Test Kalendar",
                                      calendar_id: "1",
                                      title: "Test ID",
                                      start: '2020-01-14T12:00',
                                      end: '2020-01-14T13:00',
  
                                  },
  
                          ]
                      });
                      //////////////////////////////////////////////////////////////////////////////////////////////
                      calendar1.render();
                      //////////////////////////////////////////////////////////////////////////////////////////////
                  })
                  ;
              &lt;/script&gt;
  
  
  
      &lt;div style="display: flex;" class="container"&gt;
  
              &lt;div class="container" id='1'&gt;&lt;/div&gt;
  
              &lt;div class="container" id='4'&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>