Responsive Fullscreen Fullcalendar with p-schedule

Post Reply
gozde
Posts: 4
Joined: 08 Jun 2018, 11:09

25 Jul 2018, 12:46

We use Morpheus theme and we have a problem with p-shedule tag. We want to be fullscreen fullcalendar with using p-schedule tag in responsive mode. But height:'parent' feature of fullcalendar is not working with p-schedule . How can we fix this issue? Our code is below:

Code: Select all

this.calendarOptions = {

	  defaultView: 'agendaWeek',
          height:'parent',
      }

Code: Select all

 
 .calendar-container {
   position: relative;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   height: 100%;
 }
 

Code: Select all

<div class="calendar-container">
  <p-schedule id="calendar" locale="en" [events]="events" [options]="calendarOptions" i18n-locale></p-schedule>
</div>

merve7
Posts: 316
Joined: 12 Sep 2017, 10:44

01 Aug 2018, 08:38

Firstly, please see the example of fullcalendar in https://codepen.io/pen/
Please try again with the below codes;

Code: Select all

<div #calendar id="calendar-container">
    <p-schedule id="calendar" [events]="events" locale="en" [options]="calendarOptions" i18n-locale></p-schedule>
</div>
for css

Code: Select all

#calendar-container {
    position: fixed;
    top: 70px;
    left: 70px;
    right: 0;
    bottom: 0;
}
and for dynamic height

Code: Select all


    calendarOptions: any;
    
    @ViewChild('calendar') calendarViewChild: ElementRef;
    -------------------------------------------------------------------------------------------
    
        this.calendarOptions = {
            defaultView: 'agendaWeek',
            height: this.calendarViewChild.nativeElement
        };

gozde
Posts: 4
Joined: 08 Jun 2018, 11:09

06 Sep 2018, 10:59

First of all thank you for your reply.
But this solution prevents the appearance of custom buttons (add apppointment, event list, ref) and calendar view options (day, week, month) and while the date field needs to be in the middle, it appears on the left side.
The "#calendar" tag you wrote for "calendar-container" in html, causes the "forward-back buttons" at the far right of the page, while they must appear in the middle.
The reason I did not prefer to write "position: fixed" for "calendar-container" in css, is because when the sidebar is opened in "morphous", it displays over the calendar (override).
However, with the "position: relative" code, the calendar is shifting as it should be in the theme. In terms of helping, the full Calendaroptions code is below. I would be appreciated if you could consider my previous support request again.
Thank you for your interest.

Code: Select all

  this.calendarOptions = {
      // selectOverlap: false,
      eventOverlap: false,
      selectable: true,
      editable: true,
      dragOpacity: 0.5,
      displayEventTime: false,
      header: {
        left: 'addButton listMonth refreshButton',
        center: 'prev title next',
        right: 'today agendaDay,agendaWeek,month'
      },
      buttonText: {
        'listMonth': 'Event List'
      },
      customButtons: {
        refreshButton: {

          text: "Ref",
          // icon:'fa fa-refresh',
          click: () => {
            this.cS.getAppointment(this.expand_start, this.expand_end);
          }
        },
        addButton: {

          text: "Add Appointment",
          // icon:'fa fa-refresh',
          click: () => {
            this.openAddDialogFromButton();
          }
        }
      },
      buttonsIcons: {
        refreshButton: 'left-single-arrow'
      },
      defaultView: 'agendaWeek',
      views: {
        week: {
          titleFormat: 'D MMMM, YYYY',
          columnHeaderFormat: 'dddd D MMM'
        },
        month: {
          titleFormat: 'MMMM, YYYY',
          columnHeaderFormat: 'dddd'
        },
        day: {
          titleFormat: 'D MMMM, YYYY'
        },
        list: {
          titleFormat: 'D MMMM, YYYY'
        }
      },
      firstDay: 1,
      scrollTime: scrollTime,
      slotLabelFormat: "HH:mm",
      slotLabelInterval: 30,
      slotDuration: '00:15:00',
      showNonCurrentDates: false,
      weekNumbersWithinDays: true,
      eventLimit: true,
      weekNumbers: true,
      nowIndicator: true,
      businessHours: {
        start: '08:30',
        end: '18:00'
      },
      buttonIcons: true,
      aspectRatio: 2.3,

      /// FOR HOVER //////
      eventMouseover: function(event, jsEvent, view) {

        let tooltip = '<div class="tooltiptopicevent">' + 'Subject: ' + event.title + '</div>';

        $("body").append(tooltip);
        $(this).mouseover(function(e) {
          // $(this).css('z-index', 10000);
          // $('.tooltiptopicevent').fadeIn('500');
          // $('.tooltiptopicevent').fadeTo('10', 0);
        }).mousemove(function(e) {
        var x = e.pageX;
        var y = e.pageY;
        if(y < window.innerHeight/2){
          $('.tooltiptopicevent').css('top', e.pageY + 5);
          $('.tooltiptopicevent').css('left', e.pageX + 10);
        }
        else{
          var height = $('.tooltiptopicevent').height();
          $('.tooltiptopicevent').css('top', y - height);
          $('.tooltiptopicevent').css('left', e.pageX + 10);
        }
        });
      },
      eventMouseout: function(event, jsEvent, view) {
        // $(this).css('z-index', 8);

        $('.tooltiptopicevent').remove();

      },
      selectOverlap: (event) => {
        if (event.rendering == 'background') {
          this.msgs = [];
          this.msgs.push({ severity: 'warn', summary: event.title, detail: 'Bugüne etkinlik ekleyemezsiniz.' });
        }
      },
      
      eventRender: (event, element) => {
        var titleLimit = 35;
        if (event.title.length > titleLimit) {
          element.find('.fc-title').text(event.title.substr(0, titleLimit) + '...');
        }

        if (event.rendering == 'background') {
          let str_html: string;
          if (event.title.length > 25) {

            str_html = "<html><div style='color: #ffffff;height:100%;width:100%;text-align:center;'><div style='margin:7px;overflow:hidden;'><b>" + String(event.title).substring(0, 22) + "..." + "</b></div></div></html>";
          } else {
            str_html = "<html><div style='color: #ffffff;height:100%;width:100%;text-align:center;'><div style='margin:7px;overflow:hidden;'><b>" + String(event.title).substring(0, 25) + "</b></div></div></html>";
          }
          element.append(str_html);
        }
      },

      select: (start, end, jsEvent, view) => {
        let check = start['_d'];
        let date = new Date();
        let today = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
        if (check < today) {
          if (view.name == 'agendaWeek' || view.name == 'agendaDay') {
            this.selectAppointmentError();
            $("#calendar").fullCalendar("unselect");
          }
        } else {
          if (view.name == 'agendaWeek' || view.name == 'agendaDay') {
            this.openAddDialog();
          }
        }

        this.timeOffset = this.cS.getTimeOffset();
        this.select_start = new Date(start['_d'].setHours(start['_d'].getHours() + this.timeOffset));
        this.select_end = new Date(end['_d'].setHours(end['_d'].getHours() + this.timeOffset));

        this.add_start = this.select_start.toLocaleDateString('tr', { timeZone: 'Turkey' }) + " " + this.select_start.toLocaleTimeString('tr', { timeZone: 'Turkey', hour: '2-digit', minute: '2-digit' })
        this.add_end = this.select_end.toLocaleDateString('tr', { timeZone: 'Turkey' }) + " " + this.select_end.toLocaleTimeString('tr', { timeZone: 'Turkey', hour: '2-digit', minute: '2-digit' })

      },

      eventDrop: (event, delta, revertFunc) => {
        console.log("was dropped")

        if (confirm("Are you sure about this change?")) {
          let currentTime = new Date();
          let start = new Date(event['start']['_d'].setHours(event['start']['_d'].getHours() + this.cS.getTimeOffset()));
          let end = new Date(event['end']['_d'].setHours(event['end']['_d'].getHours() + this.cS.getTimeOffset()));
          let title = event.title;
          let id = event['id'];
          let markas = event.markas;
          let display = event.display;
          let location = event.location;

          if (currentTime.getTime() > start.getTime()) {
            revertFunc();
            this.selectAppointmentError();
          } else {
            /////// FOR REMINDERS //////
            if (event.reminder != undefined) {
              let number = event.reminder[0]['alarm'][0]['trigger'][0]['rel'][0]['m'];
              let at_number = event.reminder[0]['alarm'][0]['trigger'][0]['rel'][0]['s'];

              if (at_number == 0) {
                this.selectedReminder = 'At time of event';
              }

              if (number == 1) {
                this.selectedReminder = '1 minute before';
              }

              let minutes = [5, 10, 15, 30, 45, 60];
              for (var i = 0; i < minutes.length; i++) {
                if (number == minutes[i]) {
                  this.selectedReminder = String(number) + ' minutes before';
                }
              }

              let hours = [2, 3, 4, 5, 18];
              for (var i = 0; i < hours.length; i++) {
                if (number == 60 * hours[i]) {
                  this.selectedReminder = String(number / 60) + ' hours before';
                }
              }

              if (number == 60 * 24) {
                this.selectedReminder = '1 day before'
              }

              let days = [2, 3, 4]
              for (var i = 0; i < days.length; i++) {
                if (number == 60 * 24 * days[i]) {
                  this.selectedReminder = String(number / 60 * 24) + ' days before'
                }
              }

              if (number == 60 * 24 * 7) {
                this.selectedReminder = '1 week before'
              }

              if (number == 60 * 24 * 7 * 2) {
                this.selectedReminder = '2 weeks before'
              }

            }

            let reminder = { label: this.selectedReminder, value: this.selectedReminder };

            ///// FOR MESSAGE DETAILS /////
            this.cS.getMsgDetail(event.id).then(value => {
              this.users = [];
              this.description = "";
              let calData: any = value;

              if (calData['inv'][0]['comp'][0]['desc'] != undefined) {
                if (calData['inv'][0]['comp'][0]['desc'][0]['_content'] != "\n") {
                  this.description = calData['inv'][0]['comp'][0]['desc'][0]['_content']
                }
              }

              if (calData['inv'][0]['comp'][0]['at'] != undefined) {
                for (var i = 0; i < calData['inv'][0]['comp'][0]['at'].length; i++) {
                  this.users.push(calData['inv'][0]['comp'][0]['at'][i]['a'])
                }
              }

              let modifyOpt = {
                "start": start,
                "end": end,
                "title": title,
                "id": id,
                "check": markas,
                "display": display,
                "m_reminder": reminder,
                "description": this.description,
                "location": location,
                "attendees": this.users,
                "expand_start": this.expand_start,
                "expand_end": this.expand_end
              };

              this.cS.modifyAppointment(modifyOpt)
            })
          }

        } else {
          revertFunc();
        }
      },

      eventResize: (event, jsEvent, ui, view) => {
        let start = new Date(event['start']['_d'].setHours(event['start']['_d'].getHours() + this.cS.getTimeOffset()))
        let end = new Date(event['end']['_d'].setHours(event['end']['_d'].getHours() + this.cS.getTimeOffset()))
        let title = event.title;
        let id = event['id'];
        let markas = event.markas;
        let display = event.display;
        let location = event.location;

        /////// FOR REMINDERS //////
        if (event.reminder != undefined) {
          let number = event.reminder[0]['alarm'][0]['trigger'][0]['rel'][0]['m'];
          let at_number = event.reminder[0]['alarm'][0]['trigger'][0]['rel'][0]['s'];

          if (at_number == 0) {
            this.selectedReminder = 'At time of event';
          }

          if (number == 1) {
            this.selectedReminder = '1 minute before';
          }

          let minutes = [5, 10, 15, 30, 45, 60];
          for (var i = 0; i < minutes.length; i++) {
            if (number == minutes[i]) {
              this.selectedReminder = String(number) + ' minutes before';
            }
          }

          let hours = [2, 3, 4, 5, 18];
          for (var i = 0; i < hours.length; i++) {
            if (number == 60 * hours[i]) {
              this.selectedReminder = String(number / 60) + ' hours before';
            }
          }

          if (number == 60 * 24) {
            this.selectedReminder = '1 day before'
          }

          let days = [2, 3, 4]
          for (var i = 0; i < days.length; i++) {
            if (number == 60 * 24 * days[i]) {
              this.selectedReminder = String(number / 60 * 24) + ' days before'
            }
          }

          if (number == 60 * 24 * 7) {
            this.selectedReminder = '1 week before'
          }

          if (number == 60 * 24 * 7 * 2) {
            this.selectedReminder = '2 weeks before'
          }
        }

        let reminder = { label: this.selectedReminder, value: this.selectedReminder };

        ///// FOR MESSAGE DETAILS /////
        this.cS.getMsgDetail(event.id).then(value => {
          this.users = [];
          this.description = "";
          let calData: any = value;

          if (calData['inv'][0]['comp'][0]['desc'] != undefined) {
            this.description = calData['inv'][0]['comp'][0]['desc'][0]['_content']
          }

          if (calData['inv'][0]['comp'][0]['at'] != undefined) {
            for (var i = 0; i < calData['inv'][0]['comp'][0]['at'].length; i++) {
              this.users.push(calData['inv'][0]['comp'][0]['at'][i]['a'])
            }
          }

          let modifyOpt = {
            "start": start,
            "end": end,
            "title": title,
            "id": id,
            "check": markas,
            "display": display,
            "m_reminder": reminder,
            "description": this.description,
            "location": location,
            "attendees": this.users,
            "expand_start": this.expand_start,
            "expand_end": this.expand_end
          };

          this.cS.modifyAppointment(modifyOpt)
        })

      },
      eventClick: (calEvent, jsEvent, view) => {

        this.detail_start = calEvent['start']['_d'].toDetailISOString();
        this.detail_end = calEvent['end']['_d'].toDetailISOString();
        this.attachments = [];

        /////FOR SUBJECT /////
        this.title = calEvent.title;

        /// FOR MARK AS ///
        if (calEvent.markas == 'PUB') {
          this.detail_markAs = "Public";
          this.markAs_checked = false;
        } else {
          this.detail_markAs = "Private";
          this.markAs_checked = true;
        }

        /// FOR DISPLAY ///
        if (calEvent.display == 'T') {
          this.selectedDisplay = 'Tentative'
        } else if (calEvent.display == 'B') {
          this.selectedDisplay = 'Busy'
        }

        /// FOR REMINDER ///
        if (calEvent.reminder == undefined) {
          console.log("Seçilen hatırlatıcı geçerli bir zaman aralığında değil")
          this.selectedReminder = 'Never';
        } else {
          let number = calEvent.reminder[0]['alarm'][0]['trigger'][0]['rel'][0]['m'];
          let at_number = calEvent.reminder[0]['alarm'][0]['trigger'][0]['rel'][0]['s'];
          if (at_number == 0) {
            this.selectedReminder = 'At time of event';
          }
          if (number == 1) {
            this.selectedReminder = '1 minute before';
          }

          let minutes = [5, 10, 15, 30, 45, 60];
          for (var i = 0; i < minutes.length; i++) {
            if (number == minutes[i]) {
              // this.selectedReminder = String(number) + 'minutes before';
              this.selectedReminder = String(number) + ' minutes before';
            }
          }

          let hours = [2, 3, 4, 5, 18];
          for (var i = 0; i < hours.length; i++) {
            if (number == 60 * hours[i]) {
              this.selectedReminder = String(number / 60) + ' hours before';
            }
          }

          if (number == 60 * 24) {
            this.selectedReminder = '1 day before'
          }

          let days = [2, 3, 4];
          for (var i = 0; i < days.length; i++) {
            if (number == 60 * 24 * days[i]) {
              this.selectedReminder = String(number / 60 * 24) + ' days before';
            }
          }

          if (number == 60 * 24 * 7) {
            this.selectedReminder = '1 week before';
          }
          if (number == 60 * 24 * 7 * 2) {
            this.selectedReminder = '2 weeks before';
          }
        }

        /////// FOR REPEAT ///////
        if (calEvent.recur == true) {
          this.recur = true;
        } else {
          this.recur = false;
        }

        ///// FOR LOCATION //////
        this.location = calEvent['location'];
        this.location_len = String(this.location.length);

        //// INVID /////
        this.invID = calEvent.id;

        ///// FOR MESSAGE DETAILS /////
        this.cS.getMsgDetail(calEvent.id).then(value => {
          this.users = [];
          this.description = "";
          this.at = false;
          let calData = value;

          ////Multi Part/////
          if (calData["mp"] == undefined) {
            this.mp = undefined;
          } else {
            this.attachments = [];
            this.mp = calData["mp"][0]["mp"];
            for (var i = 0; i < this.mp.length; i++) {
              let shortfilename: string;
              if (this.mp[i]["filename"] != undefined) {
                shortfilename = this.mp[i]["filename"].split(".")[0].substring(0, 6) + "." + this.mp[i]["filename"].split(".")[1];
              }
              this.attachments.push({
                "id": calData["id"],
                "part": this.mp[i]["part"],
                "filename": this.mp[i]["filename"],
                "shortfilename": shortfilename,
                "size": this.niceBytes(this.mp[i]["s"]),
                "ct": this.mp[i]["ct"],
                "cd": this.mp[i]["cd"]
              })
            }
          }

          if (calData['inv'][0]['comp'][0]['at'] != undefined) {
            calEvent['attendees'] = calData['inv'][0]['comp'][0]['at'];
            for (var i = 0; i < calData['inv'][0]['comp'][0]['at'].length; i++) {
              if (calData['inv'][0]['comp'][0]['at'][i]['a'] == "test@gfdevel.com") {
                this.at = true;
              }
            }
          }

          if (calData['inv'][0]['comp'][0]['at'] != undefined && this.at == true) {
            if (calData['inv'][0]['comp'][0]['desc'] != undefined) {
              this.description = calData['inv'][0]['comp'][0]['desc'][0]['_content'].split("*~*~*~*~*~*~*~*~*~*")[1];
              this.description = this.description.substring(4, this.description.length);
            }
            if (calData['inv'][0]['comp'][0]['at'] != undefined) {
              for (var i = 0; i < calData['inv'][0]['comp'][0]['at'].length; i++) {
                this.users.push(calData['inv'][0]['comp'][0]['at'][i]['a'])
              }
            }
            this.openDetail2Dialog();
          } else {
            if (calData['inv'][0]['comp'][0]['desc'] != undefined) {
              this.description = calData['inv'][0]['comp'][0]['desc'][0]['_content']
            }

            if (calData['inv'][0]['comp'][0]['at'] != undefined) {
              for (var i = 0; i < calData['inv'][0]['comp'][0]['at'].length; i++) {
                let user = calData['inv'][0]['comp'][0]['at'][i]['d'] + " " + '<' + calData['inv'][0]['comp'][0]['at'][i]['a'] + '>'
                this.users.push(user)
              }
            }

            this.correct_users = this.users;
            this.sugEditList = [];
            for (var i = 0; i < this.correct_users.length; i++) {
              let uid_list = this.correct_users[i].split(" ");
              uid_list = uid_list[uid_list.length - 1];
              uid_list = uid_list.substring(1, (uid_list.length - 1));
              this.sugEditList.push(uid_list);
              this.sugEditList = this.sugEditList.filter(this.onlyUnique)
            }
            this.openDetailDialog();
          }
          this.description_len = this.description.length;
          this.users_len = this.users.length;
        })

        this.calAppt = calEvent;

        this.timeOffset = this.cS.getTimeOffset();
        this.select_start = new Date(calEvent['start']['_d'].setHours(calEvent['start']['_d'].getHours() + this.timeOffset));
        this.select_end = new Date(calEvent['end']['_d'].setHours(calEvent['end']['_d'].getHours() + this.timeOffset));
        this.calEvent = calEvent;

        this.add_start = this.select_start.toLocaleDateString('tr', { timeZone: 'Turkey' }) + " " + this.select_start.toLocaleTimeString('tr', { timeZone: 'Turkey', hour: '2-digit', minute: '2-digit' });
        this.add_end = this.select_end.toLocaleDateString('tr', { timeZone: 'Turkey' }) + " " + this.select_end.toLocaleTimeString('tr', { timeZone: 'Turkey', hour: '2-digit', minute: '2-digit' });
      }
    }

Post Reply

Return to “Morpheus - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest