Phoenix LiveView hides (DOMContentLoaded) div after push_redirect

Phoenix Forum Chat / Discussions
,
1

Hello Im using fullcalendar in my project, when I load my main page with put url in my browser directly, my LiveView hides it after a sec, and I’m forced to use phx-update="ignore" to fix it, but after using push_redirect to navigate to other pages and return back to my main page of project it doesn’t work and It will be hidden.

I changed my code

<div id="calendar" phx-update="append"> </div>

to:

<div id="calendar-main" phx-update="ignore">
  <div id="calendar" phx-update="append"> </div>
</div>

but it didn’t work for me.

It should be noted, I want to update this calendar as live like the other parameters in my page and my code shows it always and don’t let it hiddens my Calender

before using push_redirect

Screen Shot 1400-03-11 at 17.36.36
Screen Shot 1400-03-11 at 17.36.36660×808 37.4 KB

after using push_redirect

Screen Shot 1400-03-11 at 17.37.21
Screen Shot 1400-03-11 at 17.37.21679×753 20.4 KB

Thanks.

Js:

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'dayGridMonth',
        right: 'title'
      },
      initialDate: '2021-09-12',
      navLinks: true, // can click day/week names to navigate views
      selectable: true,
      selectMirror: true,
      select: function(arg) {
        var title = prompt('Event Title:');
        if (title) {
          calendar.addEvent({
            title: title,
            start: arg.start,
            end: arg.end,
            allDay: arg.allDay
          })
        }
        calendar.unselect()
      },
      eventClick: function(arg) {
        if (confirm('Are you sure you want to delete this event?')) {
          arg.event.remove()
        }
      },
      editable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2021-09-01'
        },
        {
          title: 'Long Event',
          start: '2021-09-07',
          end: '2021-09-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2021-09-09T16:00:00'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2021-09-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2021-09-11',
          end: '2021-09-13',
          color: "#dadada"
        },
        {
          title: 'Meeting',
          start: '2021-09-12T10:30:00',
          end: '2021-09-12T12:30:00',
          color: "green"
        },
        {
          title: 'Lunch',
          start: '2021-09-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2021-09-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2021-09-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2021-09-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2021-09-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2021-09-28',
          color: "green"
        }
      ]
    });

    calendar.render();
  });
2

I think what you are looking for is to do this via Hooks. You could create/render your calendar within the mount hook. You could edit the calendar afterwards via the update hook or add event listeners in the hook to listen for events to update the calendar in JS.

3

I changed my code to this, but it did not work for me. it dosent show anything in my page

      <div phx-update="ignore">
        <div id="calendar" phx-hook="Calendar"> </div>
      </div>

and my Js file:

let Hooks = {}
Hooks.Calendar = {
  mounted() {
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
  
      var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
          left: 'prev,next today',
          center: 'dayGridMonth',
          right: 'title'
        },
        initialDate: '2021-09-12',
        navLinks: true, // can click day/week names to navigate views
        selectable: true,
        selectMirror: true,
        select: function(arg) {
          var title = prompt('Event Title:');
          if (title) {
            calendar.addEvent({
              title: title,
              start: arg.start,
              end: arg.end,
              allDay: arg.allDay
            })
          }
          calendar.unselect()
        },
        eventClick: function(arg) {
          if (confirm('Are you sure you want to delete this event?')) {
            arg.event.remove()
          }
        },
        editable: true,
        dayMaxEvents: true, // allow "more" link when too many events
        events: [
          {
            title: 'All Day Event',
            start: '2021-09-01'
          },
          {
            title: 'Long Event',
            start: '2021-09-07',
            end: '2021-09-10'
          },
          {
            groupId: 999,
            title: 'Repeating Event',
            start: '2021-09-09T16:00:00'
          },
          {
            groupId: 999,
            title: 'Repeating Event',
            start: '2021-09-16T16:00:00'
          },
          {
            title: 'Conference',
            start: '2021-09-11',
            end: '2021-09-13',
            color: "#dadada"
          },
          {
            title: 'Meeting',
            start: '2021-09-12T10:30:00',
            end: '2021-09-12T12:30:00',
            color: "green"
          },
          {
            title: 'Lunch',
            start: '2021-09-12T12:00:00'
          },
          {
            title: 'Meeting',
            start: '2021-09-12T14:30:00'
          },
          {
            title: 'Happy Hour',
            start: '2021-09-12T17:30:00'
          },
          {
            title: 'Dinner',
            start: '2021-09-12T20:00:00'
          },
          {
            title: 'Birthday Party',
            start: '2021-09-13T07:00:00'
          },
          {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2021-09-28',
            color: "green"
          }
        ]
      });
  
      calendar.render();
    });
  }
}

and set hook:

let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
4 
let Hooks = {}
Hooks.Calendar = {
  mounted() {
    var calendar = new FullCalendar.Calendar(this.el, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'dayGridMonth',
        right: 'title'
      },
      ...
    });
  
    calendar.render();
  }
}

You already have the element from the hook.
Remove the event listener, let the mounted take care of it. It will load the calendar on mount.

2 Likes
5

Thank you very much :heart_eyes:

1 Like