flosommerfeld/events.json

## events.json
[
  {
    "title": "All Day Event",
    "start": "2014-09-01"
  },
  {
    "title": "Long Event",
    "start": "2014-09-07",
    "end": "2014-09-10"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2014-09-09T16:00:00-05:00"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2014-09-16T16:00:00-05:00"
  },
  {
    "title": "Conference",
    "start": "2014-09-11",
    "end": "2014-09-13"
  },
  {
    "title": "Meeting",
    "start": "2014-09-12T10:30:00-05:00",
    "end": "2014-09-12T12:30:00-05:00"
  },
  {
    "title": "Lunch",
    "start": "2014-09-12T12:00:00-05:00"
  },
  {
    "title": "Meeting",
    "start": "2014-09-12T14:30:00-05:00"
  },
  {
    "title": "Happy Hour",
    "start": "2014-09-12T17:30:00-05:00"
  },
  {
    "title": "Dinner",
    "start": "2014-09-12T20:00:00"
  },
  {
    "title": "Birthday Party",
    "start": "2014-09-13T07:00:00-05:00"
  },
  {
    "title": "Click for Google",
    "url": "http://google.com/",
    "start": "2014-09-28"
  }
]

## json.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="{{ url_for('static', filename='fullcalendar.min.css') }}" rel='stylesheet' />
<link href="{{ url_for('static', filename='fullcalendar.print.css') }}" rel='stylesheet' media='print' />
<script src="{{ url_for('static', filename='lib/moment.min.js') }}"></script>
<script src="{{ url_for('static', filename='lib/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='fullcalendar.min.js') }}"></script>
<script>

	$(document).ready(function() {

		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			defaultDate: '2014-09-12',
			editable: true,
			eventLimit: true, // allow "more" link when too many events
			events: {
				url: 'data',
				error: function() {
					$('#script-warning').show();
				}
			},
			loading: function(bool) {
				$('#loading').toggle(bool);
			}
		});

	});

</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'>
		Error getting data from <code>/data</code> endpoint.
	</div>

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

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

</body>
</html>

## main.py
from flask import Flask
from flask import request, render_template, jsonify
import json
app = Flask(__name__)


@app.route('/')
def calendar():
    return render_template("json.html")


@app.route('/data')
def return_data():
    start_date = request.args.get('start', '')
    end_date = request.args.get('end', '')
    # You'd normally use the variables above to limit the data returned
    # you don't want to return ALL events like in this code
    # but since no db or any real storage is implemented I'm just
    # returning data from a text file that contains json elements

    with open("events.json", "r") as input_data:
        # you should use something else here than just plaintext
        # check out jsonfiy method or the built in json module
        # http://flask.pocoo.org/docs/0.10/api/#module-flask.json
        return input_data.read()

if __name__ == '__main__':
    app.debug = True
    app.run()
	[
	{
	"title": "All Day Event",
	"start": "2014-09-01"
	},
	{
	"title": "Long Event",
	"start": "2014-09-07",
	"end": "2014-09-10"
	},
	{
	"id": "999",
	"title": "Repeating Event",
	"start": "2014-09-09T16:00:00-05:00"
	},
	{
	"id": "999",
	"title": "Repeating Event",
	"start": "2014-09-16T16:00:00-05:00"
	},
	{
	"title": "Conference",
	"start": "2014-09-11",
	"end": "2014-09-13"
	},
	{
	"title": "Meeting",
	"start": "2014-09-12T10:30:00-05:00",
	"end": "2014-09-12T12:30:00-05:00"
	},
	{
	"title": "Lunch",
	"start": "2014-09-12T12:00:00-05:00"
	},
	{
	"title": "Meeting",
	"start": "2014-09-12T14:30:00-05:00"
	},
	{
	"title": "Happy Hour",
	"start": "2014-09-12T17:30:00-05:00"
	},
	{
	"title": "Dinner",
	"start": "2014-09-12T20:00:00"
	},
	{
	"title": "Birthday Party",
	"start": "2014-09-13T07:00:00-05:00"
	},
	{
	"title": "Click for Google",
	"url": "http://google.com/",
	"start": "2014-09-28"
	}
	]
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<link href="{{ url_for('static', filename='fullcalendar.min.css') }}" rel='stylesheet' />
	<link href="{{ url_for('static', filename='fullcalendar.print.css') }}" rel='stylesheet' media='print' />
	<script src="{{ url_for('static', filename='lib/moment.min.js') }}"></script>
	<script src="{{ url_for('static', filename='lib/jquery.min.js') }}"></script>
	<script src="{{ url_for('static', filename='fullcalendar.min.js') }}"></script>
	<script>

	$(document).ready(function() {

	$('#calendar').fullCalendar({
	header: {
	left: 'prev,next today',
	center: 'title',
	right: 'month,agendaWeek,agendaDay'
	},
	defaultDate: '2014-09-12',
	editable: true,
	eventLimit: true, // allow "more" link when too many events
	events: {
	url: 'data',
	error: function() {
	$('#script-warning').show();
	}
	},
	loading: function(bool) {
	$('#loading').toggle(bool);
	}
	});

	});

	</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'>
	Error getting data from <code>/data</code> endpoint.
	</div>

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

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

	</body>
	</html>
	from flask import Flask
	from flask import request, render_template, jsonify
	import json
	app = Flask(__name__)


	@app.route('/')
	def calendar():
	return render_template("json.html")


	@app.route('/data')
	def return_data():
	start_date = request.args.get('start', '')
	end_date = request.args.get('end', '')
	# You'd normally use the variables above to limit the data returned
	# you don't want to return ALL events like in this code
	# but since no db or any real storage is implemented I'm just
	# returning data from a text file that contains json elements

	with open("events.json", "r") as input_data:
	# you should use something else here than just plaintext
	# check out jsonfiy method or the built in json module
	# http://flask.pocoo.org/docs/0.10/api/#module-flask.json
	return input_data.read()

	if __name__ == '__main__':
	app.debug = True
	app.run()