Python -- Turn Tree into HTML calendar

StackOverflow https://stackoverflow.com/questions/22840985

  •  27-06-2023
  •  | 
  •  

Question

Using this:

def Tree(): return defaultdict(Tree)

I create a Tree of available dates for a calendar:

calendar = Tree()
# print calendar

calendar['2013']['10']=['1','2','3','4','6']
calendar['2013']['12']=['5','7','12']
calendar['2013']['11']=['8','10','19']

calendar['2014']['1']=['1','2','3','4','6']
calendar['2014']['2']=['5','7','12']
calendar['2014']['3']=['8','10','19']

print calendar

    for year in calendar:
        print "year:",year
        for month in calendar[year]:
            print "\tMonth:",month
            for day in calendar[year][month]:

print "\t\tday:",day

How do I make these the only available days in an HTML <input type="date">?

I am using bottle, and can pass the tree in as a variable:

@bottle.route('/test')
def run_test_page():

    calendar = Tree()
    calendar['2013']['10']=['1','2','3','4','6']
    calendar['2013']['12']=['5','7','12']
    calendar['2013']['11']=['8','10','19']

    calendar['2014']['1']=['1','2','3','4','6']
    calendar['2014']['2']=['5','7','12']
    calendar['2014']['3']=['8','10','19']

    return bottle.template('main/test.tpl', {'date_list': calendar})

my main/test.tpl so far:

{{date_list}}
<br><br>        
<input type="date">

EDIT: Just realized that input type='date' doesn't work in IE and chrome... so I may have to use datepicker or some js?

Was it helpful?

Solution

I found a solution, but it's probably round about. Could be more pythonic?

Firstly, I changed my tree to have two digit dates:

@bottle.route('/test')
def run_test_page():

    calendar = Tree()
    calendar['2013']['10']=['01','02','03','04','06']
    calendar['2013']['12']=['05','07','12']
    calendar['2013']['11']=['08','10','19']

    calendar['2014']['01']=['01','02','03','04','06']
    calendar['2014']['02']=['05','07','12']
    calendar['2014']['03']=['08','10','19']
    calendar['2014']['04']=['01','02','03','04']
    return bottle.template('main/test.tpl', {'date_list': calendar})

Secondly, Here is the test.tpl file (I know I should have a separate js file):

<head>
    <script src="jquery-2.1.0.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="jquery.ui.core.js"></script>
    <script src="jquery.ui.datepicker.js"></script>


</head>

<p>{{date_list}}</p>


<p>available dates for 2013: {{date_list['2013']}}</p>
<p>available dates for 2014: {{date_list['2014']}}</p>
%available_dates = ""
<p>available days:
    %for year in date_list:
    {{year}}
    %for month in date_list[year]:
    %for day in date_list[year][month]:
    %available_dates+= month+"-"+day+"-"+year+","
    %end
    %end
    %end
    %available_dates=available_dates[:-1] # get rid of last comma
</p>
<input id='availableDates' type="hidden" value="{{available_dates}}">
<br><br>
Select Start Date:
<input name="start_date" class="datepicker" id="start_date" type="text">


<script>
    var availableDates = ($('#availableDates').val()).split(",");

    function available(date) {
        dmy =  ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + "-" + date.getFullYear();
        console.log(dmy)
        if ($.inArray(dmy, availableDates) !== -1) {
            return [true, "", "Available"];
        } else {
            return [false, "", "unAvailable"];
        }
    }

    $(function(){
    $("#start_date").datepicker({
        dateFormat: "mm-dd-yy",
        beforeShowDay: available
        });
    });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top