title: How to pass a Django Object to Javascript File (template buyed in envato elements)
body: <p>dears!!</p>
  <p>I'm trying to get a Django object in a Javascript file.
  My objective is to to connect a Django template to a Javascript file and render my model info in the website.</p>
  <p>My models.py:</p>
  <pre><code>class Event(models.Model):
      _id = models.ObjectIdField(blank=True, null=False)
      title = models.CharField(max_length=200)
      slug = models.SlugField(max_length=100)
      description = models.TextField(blank=True, null=True)
      event_date = models.DateTimeField(null=True, verbose_name=&quot;Date&quot;)
      event_creation = models.DateTimeField(verbose_name=&quot;Creation&quot;, auto_now_add=True)
      start = models.DateTimeField(null=True, verbose_name=&quot;Start&quot;)
      end = models.DateTimeField(null=True, verbose_name=&quot;End&quot;)
      event_updated = models.DateTimeField(verbose_name = 'Updated',auto_now=True)
      user = models.ForeignKey(User, on_delete=models.CASCADE)
      
      def __str__(self):
          return f'event_{self.title}'
      class Meta:
          db_table = 'event'
  </code></pre>
  <p>My serializers.py:</p>
  <pre><code>class EventSerializer(serializers.ModelSerializer):
      # _id = serializers.ReadOnlyField()
      channels = Event
      class Meta:
          model = Event
          fields = '__all__'
  </code></pre>
  <p>My views.py:</p>
  <pre><code>class Calendar(LoginRequiredMixin,TemplateView):
      template_name = &quot;calendar.html&quot;
      queryset = Event.objects.all()
      serializer = EventSerializer(queryset, many=True)
      data = JSONRenderer().render(serializer.data)
  
      def get(self, request):
          context = {'event': self.data}
          return render(request, 'calendar.html', context)
  
      #FOR THE FUTURE: I WANT TO USE POST METHOD 
      # def post(self, request, *args, **kwargs):
      #     serializer = self.get_serializer(data=request.data)
      #     serializer.is_valid(raise_exception=True)
      #     event = serializer.save()
      #     return Response({
      #         &quot;event&quot;: EventSerializer(event, context=self.get_serializer_context()).data,
      #         &quot;token&quot;: AuthToken.objects.create(event)[1]
      #     })
  </code></pre>
  <p>the Javascript file (I've detected that the object that render events on calendar are the one in commented lines. What I want is to pass my Django Object into that list, as these commented object, but using my models.py):</p>
  <pre><code>! function (v) {
  &quot;use strict&quot;;
  
  function e() {}
  e.prototype.init = function () {
      var a = v(&quot;#event-modal&quot;),
          t = v(&quot;#modal-title&quot;),
          n = v(&quot;#form-event&quot;),
          l = null,
          i = null,
          r = document.getElementsByClassName(&quot;needs-validation&quot;),
          l = null,
          i = null,
          e = new Date,
          s = e.getDate(),
          d = e.getMonth(),
          e = e.getFullYear();
      new FullCalendarInteraction.Draggable(document.getElementById(&quot;external-events&quot;), 
      {
          itemSelector: &quot;.external-event&quot;,
          eventData: function (e) {
              return {
                  title: e.innerText,
                  className: v(e).data(&quot;class&quot;)
              }
          }
      });
      e = [
      //         {
      //         title: &quot;Pastel de Frango&quot;,
      //         start: new Date(e, d, 1)
      //     }, {
      //         title: &quot;Calopsita&quot;,
      //         start: new Date(e, d, s - 5),
      //         end: new Date(e, d, s - 2),
      //         className: &quot;bg-warning&quot;
      //     }, {
      //         id: 999,
      //         title: &quot;Papillon&quot;,
      //         start: new Date(e, d, s - 3, 16, 0),
      //         allDay: !1,
      //         className: &quot;bg-info&quot;
      //     }, {
      //         id: 999,
      //         title: &quot;Kibe&quot;,
      //         start: new Date(e, d, s + 4, 16, 0),
      //         allDay: !1,
      //         className: &quot;bg-primary&quot;
      //     }, {
      //         title: &quot;Quiabo&quot;,
      //         start: new Date(e, d, s, 10, 30),
      //         allDay: !1,
      //         className: &quot;bg-success&quot;
      //     }, {
      //         title: &quot;Lunch&quot;,
      //         start: new Date(e, d, s, 12, 0),
      //         end: new Date(e, d, s, 14, 0),
      //         allDay: !1,
      //         className: &quot;bg-danger&quot;
      //     }, {
      //         title: &quot;Birthday Party&quot;,
      //         start: new Date(e, d, s + 1, 19, 0),
      //         end: new Date(e, d, s + 1, 22, 30),
      //         allDay: !1,
      //         className: &quot;bg-success&quot;
      //     }, {
      //         title: &quot;Click for Google&quot;,
      //         start: new Date(e, d, 28),
      //         end: new Date(e, d, 29),
      //         url: &quot;http://google.com/&quot;,
      //         className: &quot;bg-dark&quot;
      //     }
      ]
      , document.getElementById(&quot;external-events&quot;), d = document.getElementById(&quot;calendar&quot;);
  
  
  
   function o(e) {
              a.modal(&quot;show&quot;), n.removeClass(&quot;was-validated&quot;), n[0].reset(), v(&quot;#event-title&quot;).val(), v(&quot;#event-category&quot;).val(), t.text(&quot;Add Event&quot;), i = e
          }
      var c = new FullCalendar.Calendar(d, {
          plugins: [&quot;bootstrap&quot;, &quot;interaction&quot;, &quot;dayGrid&quot;, &quot;timeGrid&quot;],
          editable: !0,
          droppable: !0,
          selectable: !0,
          defaultView: &quot;dayGridMonth&quot;,
          themeSystem: &quot;bootstrap&quot;,
          header: {
              left: &quot;prev,next today&quot;,
              center: &quot;title&quot;,
              right: &quot;dayGridMonth,timeGridWeek,timeGridDay,listMonth&quot;
          },
          eventClick: function (e) {
              a.modal(&quot;show&quot;), n[0].reset(), l = e.event, v(&quot;#event-title&quot;).val(l.title), v(&quot;#event-category&quot;).val(l.classNames[0]), i = null, t.text(&quot;Edit Event&quot;), i = null
              },
          dateClick: function (e) {
                  o(e)
              },
              events: e
          });
          c.render(), v(n).on(&quot;submit&quot;, function (e) {
              e.preventDefault();
              v(&quot;#form-event :input&quot;);
              var t = v(&quot;#event-title&quot;).val(),
                  e = v(&quot;#event-category&quot;).val();
              !1 === r[0].checkValidity() ? (event.preventDefault(), 
          event.stopPropagation(), r[0].classList.add(&quot;was-validated&quot;)) : (l ? (l.setProp(&quot;title&quot;, t), l.setProp(&quot;classNames&quot;, [e])) : (e = {
                  title: t,
                  start: i.date,
                  allDay: i.allDay,
                  className: e
              }, c.addEvent(e)), a.modal(&quot;hide&quot;))
          }), v(&quot;#btn-delete-event&quot;).on(&quot;click&quot;, function (e) {
              l &amp;&amp; (l.remove(), l = null, a.modal(&quot;hide&quot;))
          }), v(&quot;#btn-new-event&quot;).on(&quot;click&quot;, function (e) {
              o({
                  date: new Date,
                  allDay: !0
              })
          })
      }, v.CalendarPage = new e, v.CalendarPage.Constructor = e
  }(window.jQuery),
  function () {
      &quot;use strict&quot;;
      window.jQuery.CalendarPage.init()
  }();
  
  Hope anybody can help me, I did'nt find any answer fo thatin ver.
  
  Thankyou!!!
  </code></pre>