How to get rid of fullCalendar scrolling?

Question

I wrapped the <div id="calendar"></div> area.

As follows:

<div id="calendarContainer">
  <div id="calendar"></div>
</div>

After that, I modified the width and height of the #calendarContainer to 500px x 500px.

From now on, I will explain what I want to do with pictures.

I want to change the picture above as shown below.

How do I fix css?

I'd like to remove the side scrolling as much as possible.

p.s) I did the following work. As a result, the scrolling is gone, but the heat is broken.

.fc-scroller { overflow-y: hidden !important; }

hav u tried `.fc-scroller { overflow-y: hidden !important; }` — Hash, Dec 19 '17 at 11:22
@Hash To implement what I want, you can touch these three options. (overflow-x , overflow-y, height) — , Dec 19 '17 at 11:23
im confused now, isnt that what your looking for? `I'd like to remove the side scrolling` — Hash, Dec 19 '17 at 11:27
Your right. but when you look at the picture, you can see that the heat is broken. — , Dec 19 '17 at 11:33
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161525/discussion-between-seongwon-and-hash). — , Dec 19 '17 at 11:55

score 3 · Accepted Answer · answered Dec 19 '17 at 12:02

3

It's a little hacky but maybe is the best you can achieve. The idea is to override the styles.

$('#calendar').fullCalendar();

#calendarContainer {
  width: 500px;
  height: 500px;
}

.fc-scroller {
  height: auto !important;
}

.fc-head .fc-widget-header {
  margin-right: 0 !important;
}

.fc-scroller {
  overflow: visible !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>

<div id="calendarContainer">
  <div id="calendar"></div>
</div>

answered Dec 19 '17 at 12:02

Mosh Feu

28,354
16
88
135

After 30 seconds, please see my answer. – Dec 19 '17 at 12:03
It works as a result of applying the parts you give me. Thank you. – Dec 19 '17 at 12:05
Can I ask you a question related to the fullCalendar function? – Dec 19 '17 at 12:07
I'm not sure how your answer solved it, but ok :) I will be happy to help. If this question could help to other people, please ask in a `ask question` and paste the link in a comment. If not, please contact me via my LinkedIn profile (in my profile page). – Mosh Feu Dec 19 '17 at 12:19
OK I will check – Dec 19 '17 at 12:49
Feu, please check link : https://stackoverflow.com/questions/47897288/how-to-display-a-specific-month-in-fullcalendar – Dec 20 '17 at 00:56

score 1 · Answer 2 · answered Dec 19 '17 at 12:05

I solve that.

delete .fc-scroller {overflow-y: hidden! important; }

And added the code.

body 
{
  margin: 40px 10px;
  padding: 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

It's very well work.

How to get rid of fullCalendar scrolling?

2 Answers2