Minimal setup for Monthly View not working.

[stephenmichaelf]

I am trying to get a simple setup going with the Monthly view. This is running Chrome latest.

Code is as follows:

<div class="app-container code-html">
   <header class="header">
      <nav class="navbar">
         <button class="button is-rounded today">Today</button>
         <button class="button is-rounded prev">
         PREV
         </button>
         <button class="button is-rounded next">
         NEXT
         </button>
         <span class="navbar--range"></span>
      </nav>
   </header>
   <main id="app"></main>
</div>
<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
<script>
   var Calendar = tui.Calendar;
   
   var cal = new Calendar('#app', {
       defaultView: 'month',
       calendars: [
           { id: 'cal1', name: 'Personal', backgroundColor: '#DAA06D', },
       ],
       month: {
           visibleWeeksCount: 4,
       },
   });
</script>

Then when I run the page it looks like this:

Please help me understand what I am doing wrong :) I cloned the repo and got the examples but those don't work either... I am expecting to see the entire monthly calendar. Here I only see week and the numbers are blurred.

[eliezerfaizal]

for the blurred numbers, try to specify the height of that component. this is my line, maybe can be used with yours:

<calendar style="height:500px;"/>