Pertanyaan jquery fullcalender Buat garis pada waktu sekarang


Saya ingin menampilkan waktu saat ini dalam kalender penuh jquery sementara slotMinutes adalah 15

Calender

Result

Di bawah ini adalah kode saya untuk ditinjau     $ .createFullCalendarWithCurrentTime = function (selectCallback, eventsCallback, mouseOverCallback, opsi, eventRenderCallback, curTime) {

    var mintime = 7;
    var maxtime = 22;
    var slotsTable = undefined;
    var calendar = undefined;

    calendar = $('#calendar').fullCalendar({
        unselectAuto: false,
        header: { left: 'prev', center: 'title', right: 'next' },
        titleFormat: { week: "MMMM dd, yyyy{ - MMMM dd, yyyy}" }, // Sep 7 - 13 2009 ,
        defaultView: "agendaWeek",
        columnFormat: { week: 'dddd' },
        eventBackgroundColor: options && options["eventBackgroundColor"] ? options["eventBackgroundColor"] : "#FFEB00",
        eventBorderColor: "#FFEB00",
        eventTextColor: options && options["eventTextColor"] ? options["eventTextColor"] : "#333333",
        axisFormat: 'h(:mm) tt',
        aspectRatio: 0.1,
        buttonText: { prev: '', next: '' },
        selectable: (selectCallback != null && $.isFunction(selectCallback) ? true : false),
        selectHelper: true,
        editable: false,
        allDaySlot: false,
        slotMinutes: 15,
        minTime: 7,
        maxTime: 22,
        firstDay: 1,
        eventMouseover: mouseOverCallback,
        viewDisplay: function () {
            // Create slots table only if not created

            if (!slotsTable) {
                // Set time
                for (var i = 0; i < maxtime - mintime; i++) {

                    $(".fc-slot" + (i * 2 + (i * 2 + 2)) + ".fc-minor>th").html(((mintime + i) < 12 ? (mintime + i) : ((mintime + i) == 12) ? 12 : (mintime + i) % 12) + ":30 " + (mintime + i < 12 ? "am" : "pm"));
                    $(".fc-slot" + (i * 2 + (i * 2 + 2)) + ".fc-minor>th").addClass("innerHours");

                }
                // Set styles
                slotsTable = $(".fc-agenda-slots").clone();
                slotsTable.addClass("cloned");
                slotsTable
                    .css("position", "absolute")
                    .css("top", "-12px")
                    .css("z-index", "-100");
                $(".fc-agenda-slots th").css("visibility", "hidden");
                slotsTable.find("td").css("visibility", "hidden");

                // Set minimum and maximum values
                $("#minTime").html(mintime + " am");
                $("#maxTime").html(maxtime % 12 + " pm");

            } 

            $(".fc-agenda-slots").parent().append(slotsTable);
            $(".fc-slot0>th").html("");

            var offset = slotsTable.find(".fc-slot0>th").offset();
            $(".septimo").css("top", offset.top);
            $(".septimo").css("left", offset.left);
            $(".septimo").css("width", slotsTable.find(".fc-slot0>th").width());

            offset = slotsTable.find("tr:last-child>th").offset();
            $(".veintidos").css("top", offset.top + slotsTable.find("tr:last-child>th").height());
            $(".veintidos").css("left", offset.left);
            $(".veintidos").css("width", slotsTable.find("tr:last-child>th").width());
            try {
                setTimeline();
            } catch (err) { }
        },
        select: selectCallback,
        events: eventsCallback,
        eventRender: eventRenderCallback
    });
    return calendar;
};
function setTimeline(view) {
    var parentDiv = jQuery(".fc-agenda-slots:visible").parent();
    var timeline = parentDiv.children(".timeline");
    if (timeline.length == 0) { //if timeline isn't there, add it
        timeline = jQuery("<hr>").addClass("timeline");
        parentDiv.prepend(timeline);
    }

    var curTime = new Date();

    var curCalView = jQuery("#calendar").fullCalendar('getView');
    if (curCalView.visStart < curTime && curCalView.visEnd > curTime) {
        timeline.show();
    } else {
        timeline.hide();
        return;
    }

    var curSeconds = (curTime.getHours() * 60 * 60) + (curTime.getMinutes() * 60) + curTime.getSeconds();
    var percentOfDay = curSeconds / 86400; //24 * 60 * 60 = 86400, # of seconds in a day
    var hgt = parentDiv.height();
    var topLoc = Math.floor(parentDiv.height() * percentOfDay);

    timeline.css("top", topLoc + "px");

    if (curCalView.name == "agendaWeek") { //week view, don't want the timeline to go the whole way across
        var dayCol = jQuery(".fc-today:visible");
        var left = dayCol.position().left + 1;
        var width = dayCol.width() - 2;
        timeline.css({
        //left: left + "px",
        //width: width + "px"
    });
}

};


4
2018-02-05 11:29


asal


Jawaban:


Mungkin sudah ada jawaban pada SO (tetapi saya tidak dapat menemukannya ...) karena saya memiliki cuplikan kode dan demo ini di area jsfiddle saya.

Anda dapat menggunakan fungsi kustom untuk diaktifkan viewRender peristiwa; CSS berlari untuk gaya garis tambah.

Dipicu saat rentang tanggal baru dirender, atau ketika jenis tampilan   switch.

Kode:

function setTimeline(view) {
    var parentDiv = jQuery(".fc-agenda-slots:visible").parent();
    var timeline = parentDiv.children(".timeline");
    if (timeline.length == 0) { //if timeline isn't there, add it
        timeline = jQuery("<hr>").addClass("timeline");
        parentDiv.prepend(timeline);
    }

    var curTime = new Date();

    var curCalView = jQuery("#mycalendar").fullCalendar('getView');
    if (curCalView.visStart < curTime && curCalView.visEnd > curTime) {
        timeline.show();
    } else {
        timeline.hide();
        return;
    }

    var curSeconds = (curTime.getHours() * 60 * 60) + (curTime.getMinutes() * 60) + curTime.getSeconds();
    var percentOfDay = curSeconds / 86400; //24 * 60 * 60 = 86400, # of seconds in a day
    var topLoc = Math.floor(parentDiv.height() * percentOfDay);

    timeline.css("top", topLoc + "px");

    if (curCalView.name == "agendaWeek") { //week view, don't want the timeline to go the whole way across
        var dayCol = jQuery(".fc-today:visible");
        var left = dayCol.position().left + 1;
        var width = dayCol.width() - 2;
        timeline.css({
            left: left + "px",
            width: width + "px"
        });
    }

}

$('#mycalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title'
    },
    defaultView: 'agendaDay',
    editable: true,
    events: [{
        title: 'event1',
        start: '2014-01-07'
    }, {
        title: 'event2',
        start: '2014-01-10',
        end: '2013-05-15'
    }, {
        title: 'event3',
        start: '2014-01-13 12:30:00',
        allDay: false // will make the time show
    }],
    viewRender: function (view) {
        try {
            setTimeline();
        } catch (err) {}
    },
});

CSS:

.timeline {
    position: absolute;    
    border-top: 2px dashed red;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 999;
}

Demo: http://jsfiddle.net/IrvinDominin/M67kv/


4
2018-02-05 12:07



Jika Anda menggunakan versi 2.6.0 atau lebih baru dari FullCalendar, Anda dapat menggunakan build in nowIndicator: http://fullcalendar.io/docs/current_date/nowIndicator/


5
2018-05-26 12:56



Diadopsi ke versi fullcalendar 2.4:

    function setTimeline(view)
    {
        var curCalView = view || jQuery("#CalendarDiv").fullCalendar('getView');
        var parentDiv = jQuery(".fc-content-skeleton");
        var timeline = parentDiv.children(".timeline");
        if (timeline.length == 0) { //if timeline isn't there, add it
           timeline = jQuery("<hr>").addClass("timeline");
           parentDiv.prepend(timeline);
        }

        if ( 'agendaWeek' != curCalView.name && 'agendaDay' != curCalView.name ) {
            timeline.hide();
            return;
        }

        var curTime = moment();
//      console.log(curCalView.intervalStart.isBefore()); // returns always false ... ????
//      console.log(curCalView.start.unix());
//      console.log(curCalView.end.unix());
//      console.log(curTime.unix());

        var curSeconds = (curTime.hours() * 60 * 60) + (curTime.minutes() * 60) + curTime.seconds();
        var percentOfDay = curSeconds / 86400; //24 * 60 * 60 = 86400, # of seconds in a day
        var topLoc = Math.floor(jQuery(".fc-time-grid").height() * percentOfDay);

        timeline.css({"top":topLoc + "px",
            "left": "0px",
            "width": "100%"});

        if ( curCalView.start.unix() < curTime.unix() && curCalView.end.unix() > curTime.unix() ) {
            if ( curCalView.name == "agendaWeek") { //week view, don't want the timeline to go the whole way across
                var dayCol = jQuery(".fc-today:visible");
                var left = dayCol.position().left;
                var width = dayCol.width() - 2;
                timeline.css({
                    "left": left + "px",
                    "width": width + "px"
                });
            }
            timeline.show();
        } else {
            timeline.hide();
            return;
        }
    }

Sepertinya ada beberapa gangguan pada saat itu, itulah mengapa saya perlu melakukan debug seluruh barang, Anda dapat menghapusnya.

Saya sudah memasukkan panggilan awal ke acara eventAfterAllRender:

                // show a time indicator on time based views
                if ( ! this.eventTimer )
                    this.eventTimer = window.setInterval(function () { setTimeline(); }, 5 * 60 * 1000);
                setTimeline();

1
2017-11-06 15:08