• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 72
  • Last Modified:

Need to Show next dates only and calender must start with today date.

I need to start the calender with date & it must shows next 30 dates only.

can anyone please help me out from this.
0
Dhananjay Malipatil
Asked:
Dhananjay Malipatil
  • 3
  • 2
  • 2
  • +1
2 Solutions
 
Julian HansenCommented:
What calendar?
0
 
Dhananjay MalipatilPHP DeveloperAuthor Commented:
I have used fullcalendar
0
 
Julian HansenCommented:
I am not familiar with fullcalendar. Without source code or a link to a site that demonstrates the problem I am unable to assist.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Dhananjay MalipatilPHP DeveloperAuthor Commented:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>

var cal=$('#calendar').fullCalendar({

theme: false,
firstDay: 0,
isRTL: false,
fixedWeekCount: false,
weekNumbers:false,
height: 'auto',
contentHeight:'auto',
aspectRatio:'1.35',
header: {
        left: 'today',
        center: 'title',
        right: 'month'
      },
     
  eventSources: [
    {
      url: 'myfeed.php', // use the `url` property
      color: 'yellow',    // an option!
      textColor: 'black'  // an option!
          
    }
  ]

});

</script>
<style>

  body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #script-warning {
    display: none;
    background: #eee;
    border-bottom: 1px solid #ddd;
    padding: 0 10px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    color: red;
  }

  #loading {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  #calendar {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 10px;
  }

</style>
</head>
<body>

  <div id='script-warning'>
    <code>php/get-events.php</code> must be running.
  </div>

  <div id='loading'>loading...</div>

  <div id='calendar'></div>

</body>
</html>


myfeed.php

<?php
header("content-type: application/json");
    $post_data = array();

    //add first event
    $post_data[] = array('title' => 'Test', 'start' => '2018-03-09');
    $post_data[] = array('title' => 'Test', 'start' => '2018-03-20');
    $post_data[] = array('title' => 'Test', 'start' => '2018-03-09');
    $post_data[] = array('title' => 'Test', 'start' => '2018-03-09');

    //add second event
  //  $post_data[] = ...

    echo json_encode($post_data);  
?>
0
 
Dhananjay MalipatilPHP DeveloperAuthor Commented:
You can find Source code Here :

https://fullcalendar.io/download
0
 
MishaProgrammerCommented:
Try this:

$('#calendar').fullCalendar({
 	viewRender: function(currentView){
		var minDate = moment(),
		maxDate = moment().add(30,'days');
// or maxDate = moment().add(4,'weeks');
		// Past
		if (minDate >= currentView.start && minDate <= currentView.end) {
			$(".fc-prev-button").prop('disabled', true); 
			$(".fc-prev-button").addClass('fc-state-disabled'); 
		}
		else {
			$(".fc-prev-button").removeClass('fc-state-disabled'); 
			$(".fc-prev-button").prop('disabled', false); 
		}
		// Future
		if (maxDate >= currentView.start && maxDate <= currentView.end) {
			$(".fc-next-button").prop('disabled', true); 
			$(".fc-next-button").addClass('fc-state-disabled'); 
		} else {
			$(".fc-next-button").removeClass('fc-state-disabled'); 
			$(".fc-next-button").prop('disabled', false); 
		}
	}
});

Open in new window

0
 
gobinath rajuCommented:
Try using the excellent Datejs JavaScript date library (the original is no longer maintained so you may be interested in this actively maintained fork instead):

Date.today().add(-30).days(); // or...
Date.today().add({days:-30});

[Edit]

See also the excellent Moment.js JavaScript date library:

moment().subtract(30, 'days'); // or...
moment().add(-30, 'days');
0
 
MishaProgrammerCommented:
There is no activity on this question from author 14 days.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now