Typo2 & Fomantic

The upgrade-in-progress to Typomania 2 includes switching from the Semantic UI to Fomantic UI, which has integrated the Calendar module. Good stuff – although to switch any existing projects from the former to the latter, any instances of code that calls for the separate calendar module need to be removed and the implementation of class-names needs to be recoded.

form classname: calendar

In order for the popup selectors to avoid being given unwanted padding, the classname 'calendar' used to be added to the form. This now needs to go – leaving it in place causes quite a lot of weirdness. Instead, the calendar classname needs to be applied to the input fields along with 'ui'.

Types

Types are then simply applied using element classnames or ids, e.g.

	<div class="ui calendar date_calendar field">
<label>date</label>
		<div class="ui icon input">
<input name="datetime_date" type="text" value="$attendance_register_calendar_date" placeholder="Select a date" />
<i class="calendar icon"></i>
		</div>
	</div>

	<div class="ui calendar time_calendar field">
<label>time</label>
		<div class="ui icon input">
<input name="datetime_time" type="text" value="$attendance_register_calendar_time" placeholder="time" />
<i class="clock icon"></i>
		</div>
	</div>
<script>
$('.date_calendar') .calendar({
    type: 'date'
});

$('.time_calendar').calendar({
	type: 'time'
});
</script>