#javascript #jquery #fullcalendar #fullcalendar-3
#язык JavaScript #jquery #полный календарь #полный календарь-3
Вопрос:
У меня есть следующее fullcalendar , что я построил, используя следующий код
var todayDate = new Date(); $('#calendar').fullCalendar({ defaultDate: todayDate, eventLimit: true, // allow "more" link when too many events events: [{ title: 'XX-XXXXX-X: YYYY,AAAAAA,BBBBB,CCCCCC,DDDDD,EEEEEE,FFFFFF,GGGGGG', start: '2021-10-06', color: 'yellow' }] }); lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" crossorigin="anonymous"gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" crossorigin="anonymous"gt; lt;script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"gt;lt;/scriptgt; lt;div class="ui container"gt; lt;div class="ui grid"gt; lt;div class="ui sixteen column"gt; lt;div id="calendar"gt;lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Результат выглядит следующим образом
Но, как вы можете видеть, содержание 2021-10-06 слишком длинное. Есть ли какой-либо вариант, при fullcalendar котором при наведении курсора можно увидеть полное содержимое?
Ответ №1:
Вы можете попробовать вот так:
var todayDate = new Date(); $('#calendar').fullCalendar({ defaultDate: todayDate, eventLimit: true, // allow "more" link when too many events events: [{ title: 'XX-XXXXX-X: YYYY,AAAAAA,BBBBB,CCCCCC,DDDDD,EEEEEE,FFFFFF,GGGGGG', start: '2021-12-09', color: 'yellow', description: 'description for Long Event', }], eventMouseover: function(calEvent, jsEvent) { var tooltip = 'lt;div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;"gt;' calEvent.title 'lt;/divgt;'; var $tooltip = $(tooltip).appendTo('body'); $(this).mouseover(function(e) { $(this).css('z-index', 10000); $tooltip.fadeIn('500'); $tooltip.fadeTo('10', 1.9); }).mousemove(function(e) { $tooltip.css('top', e.pageY 10); $tooltip.css('left', e.pageX 20); }); }, eventMouseout: function(calEvent, jsEvent) { $(this).css('z-index', 8); $('.tooltipevent').remove(); }, }); lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" crossorigin="anonymous"gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" crossorigin="anonymous"gt; lt;script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"gt;lt;/scriptgt; lt;script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"gt;lt;/scriptgt; lt;script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'gt;lt;/scriptgt; lt;div class="ui container"gt; lt;div class="ui grid"gt; lt;div class="ui sixteen column"gt; lt;div id="calendar"gt;lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt;