CODEWITHSUNDEEP
jqueryfullcalendar
Eladerezador
Eladerezador

Reputation: 1311

DOM manipulation for fullCalendar js

I'm using fullcalendar, a JavaScript event calendar which leverages on jQuery.

I need to edit all day cells of the calendar, adding two verticals lists, both floating left; do I have to achieve that handling events?

Well; I think not.

Is there a simple and effective way to achieve that?

Below is my code illustrating my failed attempt to achieving that:

$("#calendar").fullCalendar({   
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    //defaultDate: '2015-02-12',
    monthNames:
        ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    dayNamesShort:
        ['D', 'L', 'M', 'M','J', 'V', 'S'],     
    editable: false,
    eventLimit: true, // allow "more" link when too many events
    eventRender: function(event, element) {
        //element.find(".fc-view-month td").after($("<td class=\"fc-day\"></td>").html("Prueba"));
        //element.find("div.fc-event-inner").prepend("<img src='" + event.imageurl +"' width='12' height='12'>");
        //element.find("div.fc-event-inner").prepend("<img src='../img/ico_calen_min_1.png' width='12' height='12' />");
        //element.find("table tbody td").prepend("<img src='../img/ico_calen_min_1.png' width='12' height='12' />");
        //element.find(".fc-title").after($("<span class=\"fc-event-icons\"></span>").html("<ul><li><img src=\"../img/ico_calen_min_1.png\" /></li><li><img src=\"../img/ico_calen_min_1.png\" /></li></ul>"));             
        //element.find(".fc-view-month").after($("td").html("<ul><li><img src=\"../img/ico_calen_min_1.png\" /></li><li><img src=\"../img/ico_calen_min_1.png\" /></li></ul>"));                
        //$("#calendar .fc-view-month td").append("<input type=\"checkbox\">AM<br>");
    }
});

enter image description here

Upvotes: 4

Views: 2767

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can do it in pure css using ::before pseudo and content and for example an iconic font like fontawesome.

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

Following an example on the month view.

\A and white-space: pre are needed for line breaking the icons.

Code:

.fc-widget-content::before {
    margin-top: 20px;
    font-family:'FontAwesome';
    content:"\f0c9\A\f0ac\A\f09c\A\f257";
    position: absolute;
    white-space: pre;
}

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

UPDATE

To display a column with the numbers you can use the event and style it accordingly like:

.fc-event{
    margin-left: 20px;
    width: auto !important;
}

Here is a demo of your events:

var events_array = [{
    title: '1\n2\n5\n8',
    start: new Date(2015, 9, 20),
}, {
    title: '5\n4\n1\n2',
    start: new Date(2015, 9, 21),
    tip: 'Personal tip 2'
}];

the \n is fundamental for the newline for the column number.

See:

enter image description here

Demo: http://jsfiddle.net/IrvinDominin/dcx5unzd/1/

Upvotes: 5

Related Questions