jQuery 标签输入
标签非常类似于标签并遵循相同的颜色线。 要使用它们,您需要使用默认类.tagsinput,并添加data-color =“{primary | info | success | warning | danger}”的变体。
.tagsinput
data-color =“{primary | info | success | warning | danger}”
这是一个编码示例:
<div id="fullCalendar"></div>
$calendar = $('#fullCalendar'); today = new Date(); y = today.getFullYear(); m = today.getMonth(); d = today.getDate(); $calendar.fullCalendar({ viewRender: function(view, element) { // We make sure that we activate the perfect scrollbar when the view isn't on Month if (view.name != 'month'){ $(element).find('.fc-scroller').perfectScrollbar(); } }, header: { left: 'title', center: 'month,agendaWeek,agendaDay', right: 'prev,next,today' }, defaultDate: today, selectable: true, selectHelper: true, views: { month: { // name of view titleFormat: 'MMMM YYYY' // other view-specific options here }, week: { titleFormat: " MMMM D YYYY" }, day: { titleFormat: 'D MMM, YYYY' } }, select: function(start, end) { // on select we show the Sweet Alert modal with an input swal({ title: 'Create an Event', html: '<div class="form-group">' + '<input class="form-control" placeholder="Event Title" id="input-field">' + '</div>', showCancelButton: true, confirmButtonClass: 'btn btn-success', cancelButtonClass: 'btn btn-danger', buttonsStyling: false }).then(function(result) { var eventData; event_title = $('#input-field').val(); if (event_title) { eventData = { title: event_title, start: start, end: end }; $calendar.fullCalendar('renderEvent', eventData, true); // stick? = true } $calendar.fullCalendar('unselect'); }); }, editable: true, eventLimit: true, // allow "more" link when too many events // color classes: [ event-blue | event-azure | event-green | event-orange | event-red ] events: [ { title: 'All Day Event', start: new Date(y, m, 1), className: 'event-default' }, { title: 'Meeting', start: new Date(y, m, d-1, 10, 30), allDay: false, className: 'event-green' }, { title: 'Lunch', start: new Date(y, m, d+7, 12, 0), end: new Date(y, m, d+7, 14, 0), allDay: false, className: 'event-red' }, { title: 'Nud-pro Launch', start: new Date(y, m, d-2, 12, 0), allDay: true, className: 'event-azure' }, { title: 'Birthday Party', start: new Date(y, m, d+1, 19, 0), end: new Date(y, m, d+1, 22, 30), allDay: false, className: 'event-azure' }, { title: 'Click for Creative Tim', start: new Date(y, m, 21), end: new Date(y, m, 22), url: 'http://www.creative-tim.com/', className: 'event-orange' }, { title: 'Click for Google', start: new Date(y, m, 21), end: new Date(y, m, 22), url: 'http://www.creative-tim.com/', className: 'event-orange' } ] });