How To Add a Circle or a Small Dot Around The Date in The FullCalendar Plugins

About a month ago, I got a small project about full calendar plugins. So at that time, my customer wanted the calendar to look tidy even though there were a lot of agenda piles on that date. Honestly, I’ve never tried this before so I’m not saying I can do it right away.

Then I tried to find related references to it, but I couldn’t find it … I tried several times and it worked .. yeah …

Here is a sample code that I modified a little from the original, of course, this code is messy and has not been optimized. If you have any recommendations regarding a similar project, feel free to let me know because I am very happy to improve this code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Agenda</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' />

	<style>
			.fc-ltr .fc-basic-view .fc-day-top .fc-day-number{
				float: none;
				font-size: 38px;
			}
			.fc-row .fc-content-skeleton td, .fc-row .fc-helper-skeleton td{
				text-align: center;
			}
			.navigation-detail{
				color:red !important;
				text-align: right;
				font-size: 22px;
				padding-right: 5px;
			}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
</head>
<body>

	<div id="calendar"></div>

	<script>
		 ajax_calendar();
		 
		 function ajax_calendar(){
			$.ajax({
			   url: "https://www.example.com/json",
			   success: function(result){
				  $('#calendar').fullCalendar({
					 events : result,
					 eventColor : 'green',
					 eventTextColor : 'white',
					 eventRender: function(eventObj, $el) {
						if(eventObj.status == 'batal'){
						   $el.css('text-decoration-line', 'line-through');
						}


						var tanggal = eventObj._start._i;
							tanggal = tanggal.substring(0, 10);
							tanggal = replace_all(tanggal, '-', '');
						$el.addClass('tanggal-full tanggal-' + tanggal);

					 },

					 eventAfterAllRender: function(){
						$('.fc-day-top').each(function(index, element) {
							var tanggal = $(this).data('date');
								tanggal = replace_all(tanggal, '-', '');
							var navigation = '<div class="navigation-detail" id="tanggal-'+tanggal+'"><span class="fa fa-circle fa-1x" data-id="tanggal-'+tanggal+'"></span></div>';
							
							$("a.tanggal-" + tanggal).hide();

							if($(this).parent().parent().next().children().children().eq(0).hasClass('fc-event-container') && $(this).parent().parent().next().children().children().eq(0).children().hasClass('tanggal-'+tanggal)){
								$(this).append(navigation);
							}

							if($(this).parent().parent().next().children().children().eq(1).hasClass('fc-event-container') && $(this).parent().parent().next().children().children().eq(1).children().hasClass('tanggal-'+tanggal)){
								$(this).append(navigation);
							}

							if($(this).parent().parent().next().children().children().eq(2).hasClass('fc-event-container') && $(this).parent().parent().next().children().children().eq(2).children().hasClass('tanggal-'+tanggal)){
								$(this).append(navigation);
							}

							if($(this).parent().parent().next().children().children().eq(3).hasClass('fc-event-container') && $(this).parent().parent().next().children().children().eq(3).children().hasClass('tanggal-'+tanggal)){
								$(this).append(navigation);
							}

							if($(this).parent().parent().next().children().children().eq(4).hasClass('fc-event-container') && $(this).parent().parent().next().children().children().eq(4).children().hasClass('tanggal-'+tanggal)){
								$(this).append(navigation);
							}

							if($(this).parent().parent().next().children().children().eq(5).hasClass('fc-event-container') && $(this).parent().parent().next().children().children().eq(5).children().hasClass('tanggal-'+tanggal)){
								$(this).append(navigation);
							}

							if($(this).parent().parent().next().children().children().eq(6).hasClass('fc-event-container') && $(this).parent().parent().next().children().children().eq(6).children().hasClass('tanggal-'+tanggal)){
								$(this).append(navigation);
							}
						});
					 },
					 selectable : true,
					 locale: 'id',
					 height   : 800,
					 editable : false,
					 header: {
						left   : 'month,agendaWeek,agendaDay',
						center : 'title',
						right  : 'today prev,next',
					 },
				  });
			   }
			});
		 }
		
		$(document).on("click", ".navigation-detail .fa", function() {
			var tanggal = $(this).data('id');

			$("a." + tanggal).slideToggle("slow");

			if($(this).hasClass('fa-circle-o')){
				$(this).addClass('fa-circle');
				$(this).removeClass('fa-circle-o');
			} else {
				$(this).removeClass('fa-circle');
				$(this).addClass('fa-circle-o');
			}
		});

		function replace_all(string, search, replace) {
			return string.split(search).join(replace);
		}
	</script>
</body>
</html>

Happy Coding!