0

I made a website that using fullcalendar-schedular, but I cannot see anything when I go to my website by mobile device. In other words, fullcalendar is not loaded on the page. However, It works great in PC. I don't need to make touch available, but I just need to see fullcalendar in mobile device. 

 <html>
<head>
<meta charset='utf-8' />

<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/scheduler.min.css' rel='stylesheet' />

<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/lib/fullcalendar.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.7.1/scheduler.min.js'></script>
yongseung
  • 71
  • 2
  • 13

2 Answers2

0

By default it should work on mobile devices. Please check on the desktop version if you have any console errors. Also are you certain that you do not have silly classes that have some weird media queries?

If all else fails, take a look at this thread: How to make FullCalendar work on touch devices?

If you need further assistance, let me know!

mehlichmeyer
  • 154
  • 1
  • 18
  • What do you mean some weird media queries? I have some code for connect to my MYSQL DB, but I really cannot find what is wrong. I think the size of calendar is problem. those full calendar automatically resize the size of callendar? – yongseung Jul 05 '18 at 13:09
  • 1
    Fullcalendar usually comes with bootstrap, could you show me your project structure, so I can see what files you are using? If you do not have a bootstrap.js somewhere, you should download it here: https://getbootstrap.com/docs/4.0/getting-started/download/ /e: alternatively you can show me your html page that you use to render the calendar, I could then help you further – mehlichmeyer Jul 05 '18 at 13:24
  • I add the html page. Thanks for helping me! – yongseung Jul 05 '18 at 13:36
  • Could you open the developer console (click F12), and check under the "console" tab if there are any red notification? – mehlichmeyer Jul 05 '18 at 13:39
  • I got one red notification : jamsil.html:41 Uncaught ReferenceError: $calendar is not defined at HTMLDivElement.windowResize (jamsil.html:41) at constructor.publiclyTrigger (fullcalendar.min.js:9) at constructor.windowResize (fullcalendar.min.js:9) at l (fullcalendar.min.js:6) – yongseung Jul 05 '18 at 13:44
  • okay, try removing this line: from your html – mehlichmeyer Jul 05 '18 at 13:45
  • I remove that line but still have the same notification. Here is the (jamsil.html:41) (:40)if(view != currentView){ (:41) $calendar.fullCalendar('changeView',view); (:42) } – yongseung Jul 05 '18 at 13:53
  • What I advise you to do to completely fix this issue: 1. Download fullcalendar, so you have the files in your project folder 2. Make your own javascript file, call it main.js for instance, and connect it to your html file 3. Make a div like this:
    4. In your JavaScript file, add the following code: $(function() { $('#calendar').fullCalendar({ // put your options and callbacks here }) }); Also you should probably read this: https://fullcalendar.io/docs/initialization If it doesn't work, let me know     – mehlichmeyer Jul 05 '18 at 13:53
  • Can you tell more specific about connect main.js to my html file? Actually, in my html file for full calendar, I had a javascript code, and I already added those code and div. However, I have that notification... So I don't think that gonna solve this problem. – yongseung Jul 05 '18 at 14:27
  • Now, I changed the windowresize function, and there is no red notifications in my console. However, I cannot view fullcalendar in my iphone. Also, there is one yellow Alert : fullcalendar.min.js:6 Attempting to call a FullCalendar method on an element with no calendar. Vt.warn @ fullcalendar.min.js:6 I think this is problem. – yongseung Jul 05 '18 at 14:47
0

I solved this problem by changing url to other, which is directly downloaded from file. I don't know why but, when I connected to my website, then that url caused some error while loading calendar.

yongseung
  • 71
  • 2
  • 13