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 έκδοση, αλλά είναι το ίδιο με όλες τις άλλες εκδόσεις θα δοκιμαστεί.

Δημοσιεύθηκε 12/08/2015 στις 09:09
χρήστη
Σε άλλες γλώσσες...                            


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
πηγή χρήστη

ψήφοι
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
πηγή χρήστη

ψήφοι
2

Εντάξει, με βάση την απάντηση του 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

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

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more