Fit ημερολόγιο για δοχείο

Question

Fit ημερολόγιο για δοχείο

ψήφοι

2

Προσπαθώ να κάνω την τοποθέτηση πάνω στο δοχείο χωρίς επιτυχία fullcalendar. Έχω την τροποποίηση contentHeight, heightκαι aspectRatioχωρίς αποτέλεσμα.

contentHeight:'auto' λειτουργεί μια χαρά, αν δοχείο δεν είναι μεγαλύτερο από το περιεχόμενο, την εμφάνιση κύλισης.

Καλύτερη διαμόρφωση ημερολόγιο πήρα μοιάζει με:

$('#calendar').fullCalendar({
   header: {
            left: '',
            center: '',
            right: ''
        },
    defaultView:'agendaWeek',
    contentHeight:'auto',       //auto
    slotDuration: '00:60:00',        
});

Αν πάρω δυναμικά το μέγεθος και το ρυθμίσετε:

$('#calendar').fullCalendar({
       header: {
                left: '',
                center: '',
                right: ''
            },
        defaultView:'agendaWeek',
        contentHeight:766,     //specific height instead of auto
        slotDuration: '00:60:00',        
    });

Το ημερολόγιο επεκτείνεται, αλλά μόνο η τελευταία σειρά, εμφανίζοντας ένα άσχημο τελευταία σειρά, όπως, αντί της αύξησης κάθε σειρά για να χωρέσει το περιεχόμενο. Μοιάζει με το ακόλουθο:

Είναι δυνατόν να «μεγιστοποίηση» το ημερολόγιο για να χωρέσει το δοχείο;

Έκανα μια plnkr όπου μπορείτε να αναπαραγάγετε / πιρούνι το .

Σημείωση: Δεν μπορώ να αλλάξετε το μέγεθος του δοχείου και το ύψος του δοχείου είναι δυναμική.

Δουλεύω με 2.3.2 έκδοση, αλλά είναι το ίδιο με όλες τις άλλες εκδόσεις θα δοκιμαστεί.

fullcalendar

Δημοσιεύθηκε 12/08/2015 στις 09:09
χρήστη Mario Levrero

Σε άλλες γλώσσες...

3 απαντήσεις

ψήφοι

1

Προσθέστε το παρακάτω και θα πάρετε την επιθυμητή ένδειξη:

.fc-slats table{
      height: 800px ;
    }

Για να γίνει αυτό προσαρμόζει δυναμικά που θα πρέπει να πάρετε το ύψος του δοχείου και επαναφορά.

 $( window ).resize(function() {
   var newHeight = $('#container').height();
   $( ".fc-slats > table" ).css( "height", newHeight );
});

Απαντήθηκε 12/08/2015 στις 10:15
πηγή χρήστη Brian McAuliffe

ψήφοι

1

Βελτίωση @BrianMcAuliffe απάντηση.

Είναι απαραίτητες για να προσθέσετε .fc-slats > tableτο ύψος της διαφοράς στο κάτω μέρος, έτσι πρέπει να αποφύγετε το μέγεθος των επικεφαλίδων, γραμμές εργαλείων, προσαρμοσμένα στοιχεία κλπ, που μπορεί να διαφέρουν ανάλογα με τις ρυθμίσεις Προσαρμογή ή στυλ σας. Ρύθμιση του περιεχομένου ύψος πίνακα για να ύψος του περιέκτη θα ξεχειλίσει το δοχείο.

Η διαφορά στο κάτω μέρος μπορεί να ληφθεί σαν:

var bottomContainerPos = $('#container')[0].getBoundingClientRect().bottom;
var bottomTablePos = $('.fc-slats')[0].getBoundingClientRect().bottom;
var bottomDifference = bottomContainerPos - bottomTablePos ;

Και τώρα μπορούμε να προσθέσουμε τη διαφορά με το πραγματικό ύψος:

 var newHeight = parseInt(currentHeight) + bottomDifference;
 $( ".fc-slats > table" ).css( "height", newHeight );

Ακόμα μερικά εικονοστοιχεία μπορεί να εμφανίζονται κάτω λόγω πίνακα σύνορα.

Μπορείτε να το δείτε σε αυτό το plnkr

Εκσυγχρονίζω

Κατά την τροποποίηση του στυλ πίνακα, οι κουλοχέρηδες εξακολουθούν να δημιουργηθεί με βάση το προεπιλεγμένο μέγεθος γραμμής, προσθέτοντας έτσι τα γεγονότα, δεν θα πρέπει να ευθυγραμμιστεί με ώρες λειτουργίας του, όπως μπορείτε να ελέγξετε την προσθήκη κάθε περίπτωση με την πρόταση αυτή. Plnkr να το αναπαράγουν με τα γεγονότα

Απαντήθηκε 12/08/2015 στις 12:32
πηγή χρήστη Mario Levrero

slicedtoad · Accepted Answer · 2015-08-12 13:17

Εντάξει, με βάση την απάντηση του Mario έχω διορθωθεί το σφάλμα.

Βασικα:

τη δημιουργία του ημερολογίου
να πάρει το μέγεθος
προσθέστε το μέγεθος κατά κανόνα CSS
καταστρέψει το FC
αναδημιουργήσει την ομάδα FC έτσι ώστε να προετοιμάζει με τα σωστά μεγέθη

Αυτή δεν είναι η πιο κομψή λύση, αλλά αυτό θα λειτουργήσει. Εάν τοποθετείτε εξωτερικά γεγονότα, φροντίστε να μην τα βάλετε στο πρώτο FC δημιουργείτε.

var createFC = function () {
    $('#calendar').fullCalendar({
        header: {
            left: '',
            center: '',
            right: ''
        },
        defaultView: 'agendaWeek',
        contentHeight: 'auto',
        defaultDate: '2015-02-12',
        //contentHeight:766, //This fit the content expanding only last row
        slotDuration: '00:60:00',
        events: [{
            title: 'From 7 to 17... Not aligned properly',
            start: '2015-02-12 07:00:00',
            end: '2015-02-12 17:00:00'
        }, ]

    });
}
//Adds a css style sheet
addGlobalStyle = function (css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) {
        return;
    }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

createFC(); //Create the first FC

//Calculate size
var bottomDifference = $('#container')[0].getBoundingClientRect().bottom - $('.fc-slats')[0].getBoundingClientRect().bottom;
var currentHeight = $(".fc-slats > table").css("height");
var newHeight = parseInt(currentHeight) + bottomDifference;
//$( ".fc-slats > table" ).css( "height", newHeight );
addGlobalStyle(".fc-slats > table {height:" + newHeight + "px}");

//Destroy the fullcalendar
$('#calendar').fullCalendar('destroy');
//Create it again, this time with the correct CSS rules on init
createFC();

plnkr Demo