मुझे पता है कि यह एक पुरानी पोस्ट है लेकिन मैं आज सुबह कुछ इसी तरह की तलाश में था। मुझे लगता है कि कुछ अन्य समाधानों को देखने के बाद मेरा समाधान बहुत सरल था।
एक बात यह है कि मैं एंकर टैग में फ़ॉन्ट भयानक का उपयोग करता हूं।
मैं अपने कैलेंडर पर एक घटना प्रदर्शित करना चाहता था जब उपयोगकर्ता ने घटना पर क्लिक किया। इसलिए मैंने एक अलग <div>टैग को कोडित किया जैसे:
<div id="eventContent" class="eventContent" style="display: none; border: 1px solid #005eb8; position: absolute; background: #fcf8e3; width: 30%; opacity: 1.0; padding: 4px; color: #005eb8; z-index: 2000; line-height: 1.1em;">
<a style="float: right;"><i class="fa fa-times closeEvent" aria-hidden="true"></i></a><br />
Event: <span id="eventTitle" class="eventTitle"></span><br />
Start: <span id="startTime" class="startTime"></span><br />
End: <span id="endTime" class="endTime"></span><br /><br />
</div>
मुझे अपने jquery में वर्ग नामों का उपयोग करना आसान लगता है क्योंकि मैं asp.net का उपयोग कर रहा हूं।
नीचे मेरे फुलकैन्डर ऐप के लिए jquery है।
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'APIkey',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: {
googleCalendarId: '@group.calendar.google.com'
},
eventClick: function (calEvent, jsEvent, view) {
var stime = calEvent.start.format('MM/DD/YYYY, h:mm a');
var etime = calEvent.end.format('MM/DD/YYYY, h:mm a');
var eTitle = calEvent.title;
var xpos = jsEvent.pageX;
var ypos = jsEvent.pageY;
$(".eventTitle").html(eTitle);
$(".startTime").html(stime);
$(".endTime").html(etime);
$(".eventContent").css('display', 'block');
$(".eventContent").css('left', '25%');
$(".eventContent").css('top', '30%');
return false;
}
});
$(".eventContent").click(function() {
$(".eventContent").css('display', 'none');
});
});
</script>
आपके पास अपनी खुद की Google कैलेंडर आईडी और एपीआई कुंजी होनी चाहिए।
मुझे उम्मीद है कि यह मदद करता है जब आपको एक साधारण पॉपअप डिस्प्ले की आवश्यकता होती है।