CODEWITHSUNDEEP
fullcalendar
Neil
Neil

Reputation: 2902

How to move the date in the cell to the bottom right in Full Calendar

I am using the latest version of jQuery Full calendar . Currently the date number by defaul is in the top right of the cell . I want to move it to the bottom right . I tried doing it via CSS i.e. vertical-align:bottom but it does not affect the first column.

/*Edit**/

Ok the css solution did not work so I moved the html structure around

Original :

<td class="fc-sat fc-widget-content fc-day6 fc-last">
  <div>
    <div class="fc-day-number">2</div>
    <div class="fc-day-content">
      <div style="position:relative">&nbsp;</div>
    </div>
  </div>
</td>

New 

<td class="fc-sat fc-widget-content fc-day6 fc-last">
      <div>

        <div class="fc-day-content">
          <div style="position:relative">&nbsp;</div>
        </div>
      </div>
      <div class="fc-day-number">2</div>
    </td>

' As you can see I have moved the .fc-day-number div outside and added vertical-align:bottom to the td . This works but now the height resize of the cells does not work

Upvotes: 3

Views: 5065

Answers (1)

ganeshk
ganeshk

Reputation: 5631

You can edit the fullcalendar.css to add these settings to the existing tags:

.fc-widget-content {
    position: relative;
}

.fc-day-number {
    position: absolute;
    right: 0;
    bottom: 0;
}

This should move the day number to the bottom right corner.

Upvotes: 1

Related Questions