Customize Calendar: Week Numbers

Applications Calendar
#1

Hi,
i use the Calendar App in one of my Application and want to show Weeknumbers in my calendar. I found the code to do this in Fullcalendar (the one SC uses):

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid' ],
    defaultView: 'dayGridMonth',
    weekNumbers: true
  });

  calendar.render();
});

Is there a way to customize the FullCalendar (there are a lot of other options available)?
Thanks for your help. I wish everyone a happy 2020!
Best regards
Steve

#2

Is this code already working?

#3

Hi there,
This is an old topic, but since I haven´t seen any answer and I add the same need, here is how I manage to make it work for week numbers and I believe should be possible to fullcalendar other options.

//onCalendarScriptInit

?>
<script type="text/javascript" src="<?php echo $this->Ini->path_prod; ?>/third/jquery/js/jquery.js"></script>

<script type="text/javascript">
  
	$(document).ready(function() {
		
		$(document).ready(function() {
	   
			$('#calendar').fullCalendar('option', {
			
				weekNumbers: true
			});
	   
		});
	});
	  
</script>

<style>
	.fc-week-number {
		background-color: #E0E6ED; 
		color: #8492A6; 
		border-color: #c6d0dc; 
		border-width: 1px; 
		border-style: solid;
	}
	
</style>
<?php
#4

That doesn’t seems to work anymore in Scriptcase 9.9.025

Does anyone find out, how to display the weeknumbers?
Thank’s for any tips.
Best regards
Steve

#5

I also got the same problem. Calendar customizations with the onCalendarScriptInit Event dont work anymore after updating to SC 9.09.0018.

#6

I found a solution that works with the new versions of Scriptcase and Fullcalendar.
After inspecting the code I found that jQuery is no longer supported on Fullcalendar 6.x. So you have to use JavaScript.

Use this instead:

<script type="text/javascript">

        $(document).ready(function() {

		     scMainCalendar.setOption('weekNumbers', true);

        });

</script>
2 Likes
#7

Hi,
thanks for your answer. This works like a charm and save me a lot of time.
Have a nice day!
Best regards
Steve

#8

i have updated to the latest version and can’t get this working. any suggestion how to get started?
ea. where and how do i put this script?