Полный календарь в Django - несколько календарей - PullRequest
0 голосов
/ 14 января 2020

Я полагаю, что это простая задача, но я просто не могу понять это самостоятельно.

У меня есть модель календаря, модель событий и модель CalendarGroups, а также форма с моделью событий.

Что мне нужно, так это выбор календаря при создании мероприятия.

Итак, Пользователь хочет добавить событие и выбрать календарь для этого события, и это событие будет отображаться только в этом календаре.

На данный момент я сделал два календаря из Панель администратора, и я могу отобразить эти два, и они имеют разные идентификаторы, которые я вижу из источника страницы.

Но когда я пытаюсь добавить событие, и когда я выбираю календарь с ID = 1 например, событие отображается в обоих календарях (необходимо отображать только в календаре с идентификатором = 1).

Это мой models.py:

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)

Это мой views.py:

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)

Это форма для добавления событий

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()
        }

html для добавления событий с формой и предварительным просмотром календаря. Предварительный просмотр календаря не работает. Это не делает вообще. Это оказывает только форму.

{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %} Zakazivanje {% endblock %}

{% block content_row %}
    <div style="display: flex;" class="flex-container">

        <div class="container">
            <div class="row">
                <div class="col">
                    <form method="post" action="{% url 'main:add_event' opp.pk %}">
                        {{ form|crispy }}
                        {% csrf_token %}
                        <button type="submit" class="btn btn-primary">Potvrdi</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            {% if calendar %}
                {% for cal in calendar %}
                    <script>
                        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();
                            //////////////////////////////////////////////////////////////////////////////////////////////
                        })
                        ;
                    </script>
                {% endfor %}
            {% endif %}
            <style>

                .calendarMine {
                    max-width: 400px;
                    margin: 0 auto;
                }
            </style>

            <div style="display: flex;" class="flex-container">
                {% for cal in calendar %}
                    <div class="calendarMine" id='{{ cal.id }}'></div>
                {% endfor %}
            </div>

        </div>
    </div>

{% endblock content_row %}

Это моя страница календаря. Оба календаря отображаются, но события находятся в обоих календарях.

{% extends 'base.html' %}
{% load static %}
{% block title %} Kalendar {% endblock title %}



{% block content_row %}
    <!--------------------------------------------- FULLCALENDAR LINKS ---------------------------------------------->
    {% include 'main/partials/_link_fullcalendar.html' %}
    <!--------------------------------------------- FULLCALENDAR LINKS END ------------------------------------------>

    {% if messages %}
        {% for message in messages %}
            <div class="container-fluid">
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>Uspešno!</strong> {{ message }}
                </div>
            </div>
        {% endfor %}
    {% endif %}

    {% if calendars %}
        {% for cal in calendars %}
            <script>
                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();
                    //////////////////////////////////////////////////////////////////////////////////////////////
                })
                ;
            </script>
        {% endfor %}
    {% endif %}

    <div style="display: flex;" class="container">
        {% for cal in calendars %}
            <div class="container" id='{{ cal.id }}'></div>
        {% endfor %}
    </div>

    <!---------------------------------------------- FULLCALENDAR SCRIPT----------------------------------------------->
    {% include 'main/partials/_fullcalendar_script.html' %}
    <!---------------------------------------------- FULLCALENDAR SCRIPT END ------------------------------------------>
{% endblock %}

Это источник страницы:

<script>
                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();
                    //////////////////////////////////////////////////////////////////////////////////////////////
                })
                ;
            </script>

            <script>
                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();
                    //////////////////////////////////////////////////////////////////////////////////////////////
                })
                ;
            </script>



    <div style="display: flex;" class="container">

            <div class="container" id='1'></div>

            <div class="container" id='4'></div>

    </div>

1 Ответ

1 голос
/ 15 января 2020

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

Одной из возможных причин может быть это при циклическом просмотре ваших событий. Таким образом, вы можете переписать часть «события» в вашем календарном скрипте

    events: [
      {% for i in events %}
          {% if i.calendar_id == cal.id %}
              {
                 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" }}',

              },
           {% endif %}
      {% endfor %}
    ]

Другие возможности могут включать в себя дифференцирование вашего взгляда

...