Hi, add some class to .main and .main-footer like below:

<div class="main main-app p-3 p-lg-4 d-flex flex-column">
  ...
  <div class="main-footer mt-auto">...</div>
</div>

Really. It helped. But, why is this scrolling here? even if the content is not filled to the full page.

Screenshot – https://prnt.sc/UZHcfiDpgTmZ

Hi, it is perfectly fine on our end. May I know what device and browser you are using? Thanks

I am talking about calenar which is comes in popup, can you share email id i will share screenshot. Have a look this page, click on book appointment button on right side. http://test.ustay.ai/calendar.html

You have an error in your page: Uncaught TypeError: $(...).fullCalendar is not a function

Try removing your code: $(”#calendar”).fullCalendar();

Removed but still error, can you provide support url, i will send screenshot for more clarify.

can you send support email id

??? plz update

I saw the issue in your website. It seems that it does not displayed properly during first load then get it fixed when resizing window or switching from week to day or month. You can also send screenshot to email: themepixels[at]gmail.com

Try to initialize the calendar outside of modal

I want to open calendar in modal box, so let me know how initialize the calendar inside, i also check this code but it not works.

https://codepen.io/Bes7weB/pen/JJVbpj i saw this example it works perfectly but i implement this code in our template not works.

how to use implement this script in our calendar: $(’#doc-cal’).on(‘shown.bs.modal’, function () { $(”#doctor-calendar”).fullCalendar(‘render’); });

825our calender is defulat render but i need to render when bootstrap modal open. hope you understand my problem.+

plz help me out.

On you calendar.js, please remove the code below

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    longPressDelay: 1,
    headerToolbar: {
      left: 'custom1 prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    eventSources: [calendarEvents, birthdayEvents, holidayEvents, discoveredEvents, meetupEvents,otherEvents],
    selectable: true,
    select: function(info) {
      var startDate = moment(info.start).format('LL');
      $('#startDate').val(startDate);

      var endDate = moment(info.startStr).add(1, 'days');
      $('#endDate').val(endDate.format('LL'));

      $('#modalCreateEvent').modal('show');
    },
    eventClick: function(info) {
      console.log(info.event.start);

      // Set title
      $('#modalLabelEventView').text(info.event.title);

      $('#modalEventView').modal('show');
    },
  });

  calendar.render();

});

...and replace it with the code below:

$('#exampleModal').on('shown.bs.modal', function(){
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    longPressDelay: 1,
    headerToolbar: {
      left: 'custom1 prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    eventSources: [calendarEvents, birthdayEvents, holidayEvents, discoveredEvents, meetupEvents,otherEvents],
    selectable: true,
    select: function(info) {
      var startDate = moment(info.start).format('LL');
      $('#startDate').val(startDate);

      var endDate = moment(info.startStr).add(1, 'days');
      $('#endDate').val(endDate.format('LL'));

      $('#modalCreateEvent').modal('show');
    },
    eventClick: function(info) {
      console.log(info.event.start);

      // Set title
      $('#modalLabelEventView').text(info.event.title);

      $('#modalEventView').modal('show');
    },
  });

  calendar.render();
});

Hi, give me until next week to add RTL version of this template. Thanks!

Hi. Any update on RTL? I am waiting for it as I have to buy it urgently.

RTL is in progress. ETA is in 2-3 days

Hi dear. I hope that RTL will be completed now