Laravel : Bootstrap-datepicker-sandbox highlight specific date

Question

On a landing page a datepicker is loaded as you can see in the image. I want to be able to change the background colors of specific dates on the calendar.

For example : If 27-11-2017 slot is booked, then on load I want the color to change for that date.

My Script code:

<script>
$(document).ready(function () {
    // I am getting a data on this loop so how can i change same date background color      
    @if(!empty($BookeData))
        @foreach($BookeData as $key => $value)
            @if($value->event_date)

            @endif
        @endforeach
    @endif
    /* Gt data in $BookeData
    array:13 [
    "id" => 8
    "source_type" => "App\Venue"
    "source_id" => 7
    "event_date" => "2017-11-28"
    "session" => "1"
    "payment" => "5000"
    "status" => "Booked"
    "created_at" => "2017-11-27 10:30:22"
    "updated_at" => "2017-11-27 10:30:22"
  ]*/

    var date = new Date();
    var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    $('#datepicker').datepicker({
        changeYear: true,
        multidate :true,
        maxViewMode: 0,
        startDate: today
    }).on('changeDate', function(e) {
        var $date = $.datepicker.formatDate('yy-mm-dd', e.date);
        $("#event_date").val($date);
        //e.preventDefault();
        //var formData = $('form').serialize();
        $.ajax({
            type: 'GET',
            url: "{{ route('admin.calendar.add') }}",
            data: {'date':$date},
            cache: false,
            success: function(response){
                $("#calendar div.divForm").html(response);
                $("<input type='hidden' value='' name='event_date' id='event_date' />").appendTo('#calendar div.dateDiv');
                $("#event_date").val($date);
                $("#calendar").show();
            }
        });
    });

    $(".close").on("click", function() {
        $("#calendar").hide();
    });
});

Is $value->event_date gives you a booked date for a venue?? — Hiren Gohel
– Hiren Gohel, Commented Nov 27, 2017 at 11:29
yes. you can check on array data..I want to change background color of the same date. — Zuber Mafat
– Zuber Mafat, Commented Nov 27, 2017 at 11:30
Just try: $('#whateverID').datetimepicker({ color: yellow;background: white; } }); — Hiren Gohel
– Hiren Gohel, Commented Nov 27, 2017 at 11:43

Hiren Gohel · Accepted Answer · 2017-11-27 12:04:15Z

1

As i understand your issue, try as like below:

<input type="text" id="datepicker" />

var booked_date = ["27/11/2017"];  //Take your booked date here from your data

$("#datepicker").datepicker({
 format: "dd/mm/yyyy",
 autoclose: true,
 todayHighlight: true,
 beforeShowDay: function(date){
     var d = date;
     var curr_date = d.getDate();
     var curr_month = d.getMonth() + 1; //Months are zero based
     var curr_year = d.getFullYear();
     var formattedDate = curr_date + "/" + curr_month + "/" + curr_year

     if ($.inArray(formattedDate, booked_date) != -1){
       return {
          classes: 'activeClass'
       };
     }
  return;
 }
});

The activeClass can be any form of CSS. In my example i have just changed the background color. In your example you could offset an image and apply it to the day.

.activeClass{
   color: yellow;
   background: white; 
}

Hope this helps you OR you can get some idea!

edited Nov 27, 2017 at 12:04

answered Nov 27, 2017 at 11:58

Hiren Gohel

5,0496 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hiren Gohel Over a year ago

Glad i could help you brother! Happy coding :) ^_^ Try to change css according you want!

Zuber Mafat Over a year ago

one more question if i want to loop this script as i told you that i am getting only one date at loop $value->event_date .how can i set my code.

Hiren Gohel Over a year ago

var booked_date = ["27/11/2017"]; is an array();. So you can take many dates which comes from your data! I mean your dates from loop and set it there!

Zuber Mafat Over a year ago

But there is a date on my loop and a flag for the full day and half day booking..so i want to test condition if same day date & flag== full day then apply some css..

Collectives™ on Stack Overflow

Laravel : Bootstrap-datepicker-sandbox highlight specific date

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related