Year view is not responsive with Bootstrap 3

[rodolfojcj]

When viewing the version that uses Bootstrap 3 (http://bootstrap-calendar.azurewebsites.net/index-bs3.html) the "Year" view renders ugly if the screen width gets smaller. This happens with browsers Firefox 32, Opera Mobile Emulator, Chromium 37 on Kubuntu Trusty 14.04, but I suspect it could be the same with other browsers or operating systems. Other views in the same link render fine.

In the order hand, the link using Bootstrap 2 (http://bootstrap-calendar.azurewebsites.net/index.html) renders acceptably for the year view when the width decreases on those same browsers.

In a local installation of mine I tried modifying some CSS classes on the file tmpls/year.html but didn't get something useful. It could be a fine if a solution makes each month cell of the same size and the right most cells did not expand too much to fill the blank space to the right of the overall calendar div.

[eleazan]

You 're right!

[alexrqs]

@Serhioromano @eleazan how much of the css can I touch to fix this? because a lot of stuff need to change like span[data-cal-date] this is too generic and I will need change some span for divs, what you think?

[eleazan]

Well, you can fix them with a little classes, without code css...

For example, you can add col-xs-3, or maybe col-sm-3 && col-xs-6... with a tablet, your view still without changes, and with a smartphone, you only view 2 monh for line (for read the month correctly).

I don't know what solution wants @Serhioromano, so, still for his response!

So, the template year.html may be look like

<div class="cal-year-box">
    <div class="row row-fluid cal-before-eventlist">
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month1"><%= cal._month(0) %></div>
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month2"><%= cal._month(1) %></div>
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month3"><%= cal._month(2) %></div>
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month4"><%= cal._month(3) %></div>
    </div>
    <div class="row row-fluid cal-before-eventlist">
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month1"><%= cal._month(4) %></div>
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month2"><%= cal._month(5) %></div>
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month3"><%= cal._month(6) %></div>
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month4"><%= cal._month(7) %></div>
    </div>
    <div class="row row-fluid cal-before-eventlist">
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month1"><%= cal._month(8) %></div>
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month2"><%= cal._month(9) %></div>
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month3"><%= cal._month(10) %></div>
        <div class="span3 col-md-3 col-sm-3 col-xs-6 cal-cell" data-cal-row="-month4"><%= cal._month(11) %></div>
    </div>
</div>

Works fine, but need some work on borders (on smartphones)

[eleazan]

No news?

[eleazan]

@steliosph, you add these to your fork? ;)

[steliosph]

@eleazan i have just now :)

[eleazan]

I want to test your fork... some day!

Seems to be a great work! :P

[Serhioromano]

@steliosph why don't you create PR with this fix?