make clndr.js calendar responsive

I have a calendar which is made by CLNDR plugin which is very nice, using underscore.js, moment.js. The calendar is working perfectly but the issue is how to make it responsive to bigger screens and smaller ones. I have tried but only day headers are responsive, the respective days are not and it brings inaccurate information.

See the fiddle here.

My approach to make it responsive (which brings the above-detailed error):

#mini-clndr .clndr .days-container .days .headers .day-header {
   width: 14%;
   display: inline-block;
   text-align: center;
   color: white;
}

Thanks for assistance

1 answer

  • answered 2018-08-09 01:04 acarlstein

    My advice is to use Bootstrap. Checkout this link: https://getbootstrap.com/docs/3.3/css/ It will allow you to create your calendar to be flexible.

    Here is another running example from https://www.w3schools.com/howto/howto_css_calendar.asp

    (Make it fullpage to see how it behaves when you resize the screen)

    /**
     * Author: w3schools.com
     * URL: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_calendar
     */ 
    /**
     * Author: w3schools.com
     * URL: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_calendar
     */ 
     
     * {box-sizing: border-box;}
    ul {list-style-type: none;}
    body {font-family: Verdana, sans-serif;}
    
    .month {
        padding: 70px 25px;
        width: 100%;
        background: #1abc9c;
        text-align: center;
    }
    
    .month ul {
        margin: 0;
        padding: 0;
    }
    
    .month ul li {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    
    .month .prev {
        float: left;
        padding-top: 10px;
    }
    
    .month .next {
        float: right;
        padding-top: 10px;
    }
    
    .weekdays {
        margin: 0;
        padding: 10px 0;
        background-color: #ddd;
    }
    
    .weekdays li {
        display: inline-block;
        width: 13.6%;
        color: #666;
        text-align: center;
    }
    
    .days {
        padding: 10px 0;
        background: #eee;
        margin: 0;
    }
    
    .days li {
        list-style-type: none;
        display: inline-block;
        width: 13.6%;
        text-align: center;
        margin-bottom: 5px;
        font-size:12px;
        color: #777;
    }
    
    .days li .active {
        padding: 5px;
        background: #1abc9c;
        color: white !important
    }
    
    /* Add media queries for smaller screens */
    @media screen and (max-width:720px) {
        .weekdays li, .days li {width: 13.1%;}
    }
    
    @media screen and (max-width: 420px) {
        .weekdays li, .days li {width: 12.5%;}
        .days li .active {padding: 2px;}
    }
    
    @media screen and (max-width: 290px) {
        .weekdays li, .days li {width: 12.2%;}
    }
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    <!--
    /**
     * Author: w3schools.com
     * URL: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_calendar
     */
    -->
    
    <h1>CSS Calendar</h1>
    
    <div class="month">      
      <ul>
        <li class="prev">&#10094;</li>
        <li class="next">&#10095;</li>
        <li>
          August<br>
          <span style="font-size:18px">2017</span>
        </li>
      </ul>
    </div>
    
    <ul class="weekdays">
      <li>Mo</li>
      <li>Tu</li>
      <li>We</li>
      <li>Th</li>
      <li>Fr</li>
      <li>Sa</li>
      <li>Su</li>
    </ul>
    
    <ul class="days">  
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li><span class="active">10</span></li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
    </ul>
    
    </body>
    </html>

    So, the idea is to first build your calendar using bootstrap + CSS or pure CSS.

    Remember that you can also use media queries for the screen sizes:

    @media (max-width: 768px) { ... }
    @media (min-width: 768px)) and (max-width: 992px) { ... }
    

    For example:

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) { ... }
    
    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) { ... }
    
    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) { ... }