2017-09-19 5 views
-1

Ich habe einen Link für die Ereignisbegrenzung innerhalb einer Tageszelle für einen vollständigen Kalender, und ich versuche, ihn in CSS vertikal auszurichten. HierText in der Zelle einer Tabelle vertikal ausrichten

ist ein Link zu meiner js Geige here

Es ist wie fullcalendar sieht wickelt einen div um den Anker-Tag, dass der eventLimit Link ist, dass im Idealfall das beste Element wäre vertikal ausrichten, aber ich weiß nicht, wenn ich in CSS darauf zugreifen kann. Vielleicht kann ich das irgendwie im kalender mit eventRender ??

Kann dies problemlos in CSS erfolgen oder gibt es eine bessere Möglichkeit, dies im Vollkalender zu tun?

$(document).ready(function() { 
 
\t \t 
 
\t \t $('#calendar').fullCalendar({ 
 
\t \t \t header: { 
 
\t \t \t \t left: 'prev,next today', 
 
\t \t \t \t center: 'title', 
 
\t \t \t \t right: '' 
 
\t \t \t }, 
 
\t \t \t //defaultDate: '2014-06-12', 
 
\t \t \t defaultView: 'basicWeek', 
 
\t \t \t editable: false, 
 
     height: 174, 
 
     eventLimit: 1, 
 
     eventLimitText: function (numEvents) { 
 
     \t return numEvents; 
 
     }, 
 
\t \t \t events: [ 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Event', 
 
\t \t \t \t \t start: '2017-09-18' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Event', 
 
\t \t \t \t \t start: '2017-09-18' 
 
\t \t \t \t } 
 
\t \t \t ] 
 
\t \t }); 
 
\t \t 
 
\t });

Antwort

2

Sie benötigen eine Tischhöhe einstellen, die Höhe des Containers

Versuche entsprechen Ihr CSS zu dieser Aktualisierung:

td.fc-more-cell { 
    text-align: center; 
    font-size: 2.3em; 
    vertical-align: middle 
} 

.fc-content-skeleton, 
table, 
tr { 
    height: 100%; 
} 
0

Verwenden Zeilenhöhe für die verankern, wird der Text in der Zelle vertikal ausgerichtet.

here ist die Geige;

td.fc-more-cell { 
     text-align: center; 
     font-size: 2.3em; 
} 
td.fc-more-cell a{ 
    line-height:85px; 
} 
1

Hier gehts mit. überprüfen Sie die JS Fiddle http://jsfiddle.net/rbynbu4z/1/

Ich habe den Code unten

.fc-row .fc-content-skeleton, 
.fc-row .fc-content-skeleton td, 
.fc-row .fc-content-skeleton table, 
.fc-row .fc-content-skeleton tr{ 
    height: 100%; 
    vertical-align: middle; 
} 
.fc-row .fc-content-skeleton td div { 
     display: inline-block; 
    line-height: 100%; 
} 
Verwandte Themen