How to select a week cpn fullcalendar

Question

How to select a week cpn fullcalendar

Navigation

#1 by (0 votes)

0

I would like to know how I can do to select the full week from a particular day in fullCalendar. It occurs to me through the dayClick event, the subject that until now I have only been able to obtain the day, but I would like to know the whole week something like that shown in the image.

so far I have the calendar set up this way.

 $(document).ready(function() {
    $('#calendar').fullCalendar({
    	//defaultView: 'agendaWeek',
  		//lang: 'es',
  		weekends: false,
  		columnFormat: 'dddd',
  		header: {
        	left: 'prev,next',
        	center: 'title',
        	right: 'month'
        },
        editable: true,
  		eventLimit: true,
  		weekend: true,
  		allDaySlot: false,
  		dayClick: function(date, jsEvent, view) {
  			var dia = date.format();
  			alert(dia);
  		}
  		
    });

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale/es.js"></script>

Thank you very much.

javascript jquery html fullcalendar

asked by marcos vasquez 26.11.2018 в 23:00

source

1 answer

Regular Expressions. Help module compiled against API version

score 0 · Answer 1

Based on what I understood and what you put in your comments, what you need is a function like the following, where you get 5 days a week from the date obtained by means of the click, in this function what is done is to print those 5 days:

$(document).ready(function() {
    $('#calendar').fullCalendar({
     //defaultView: 'agendaWeek',
    //lang: 'es',
    weekends: false,
    columnFormat: 'dddd',
    header: {
         left: 'prev,next',
         center: 'title',
         right: 'month'
        },
        editable: true,
    eventLimit: true,
    weekend: true,
    allDaySlot: false,
    dayClick: function(date, jsEvent, view) {
     //var dia = date.format();
        //console.log(dia);
        
        var date2 = new Date(date);
        var day = date2.getDay();
        var array = []
        for(var i=0;i<5;i++){
        if(i-day!=0){
          var days = i-day;
          var newDate =   new Date(date2.getTime()+(days * 24 * 60 * 60 * 1000));
          array.push(newDate);
        }
        else 
          array.push(date2);
        }    
    console.log(array);
        
    }
    
    });

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale/es.js"></script>

As you mentioned by example, when you click on Wednesday 7 (talking about the month of November of this year), you print Monday 5, Tuesday 6, Wednesday 7, Thursday 8 and Friday 9.

I hope it helps you. Greetings.