I ran into a bit of an issue so I'd appreciate any help.
I'm trying to display a dynamically created calendar in my component. The new one with all the fancy stuff. I've got it to display, but it's as if it's not picking up all the attributes that are sent to it.
So, to cut the story short, this is what I'm doing:
$attrcalendar = [
'size' => ($metadata['size'] != '') ? $metadata['size'] : '100%',
'showTime' => ($metadata['showTime'] != '') ? $metadata['showTime'] : 0,
'timeFormat' => ($metadata['timeFormat'] != '') ? '24' : '12',
'singleHeader' => ($metadata['singleHeader'] != '') ? $metadata['singleHeader'] : 0,
'todaybutton' => ($metadata['todayButton'] != '') ? true : false,
'weekNumbers' => ($metadata['weekNumbers'] != '') ? true : false,
'minYear' => ($metadata['minYear'] != '') ? $metadata['minYear'] : '1900',
'maxYear' => ($metadata['maxYear'] != '') ? $metadata['maxYear'] : '2017',
'firstDay' => '1'
];
echo JHTML::_('calendar', $defaultvalue, $calendarname, $calendarid, '%Y-%m-%d', $attrcalendar);
I'm filling all the values from user inputs and the $attrcalendar is populated as it should be. However, with the code above, when it gets rendered, I'm getting the following (I left out the input field of the calendar):
<button type="button" class="btn btn-secondary" id="mycalendar_btn" data-inputfield="mycalendar" data-dayformat="%Y-%m-%d" data-button="mycalendar_btn" data-firstday="0" data-weekend="0,6" data-today-btn="0" data-week-numbers="0" data-show-time="1" data-show-others="1" data-time-24="12" data-only-months-nav="0" title="Open the calendar"><span class="icon-calendar" aria-hidden="true"></span></button>
As you can see, it's not picking up todaybutton (tried all combinations of smaller/upper case variable name), firstday, min and max year (even tried with +1, -1 for those fields).
I also tried coding a <input type="text"...> and <button...> with all the necessary attributes, but then I can't get it to initialise. I tried with:
elements = document.querySelectorAll("#the-id-of-the-input");
for (i = 0; i < elements.length; i++) {
JoomlaCalendar.init(elements[i]);
}
but then the calendar doesn't get rendered because of an error, no valid input. I tried a lot of combinations, can't even think of them all. I'm guessing I did something wrong in the JoomlaCalendar.init piece, but I simply can't figure it out.
I can get it to somewhat function if I call
Any kind of help much appreciated. :)
Today attribute is not correct in your code. CHange it from -
'todaybutton' => ($metadata['todayButton'] != '') ? true : false,
To
'todayBtn' => ($metadata['todayButton'] != '') ? true : false,
If you want to calendar object the element that init object expect is div which contains input field.
<div class="field-calendar">
<div class="input-append">
<input type="text" id="filters_startDate" name="filters[startDate]" value="" class="tjrsmall-input dash-calendar validate-ymd-date filter-hide" onchange="this.form.submit;" placeholder="FROM (YYYY-MM-DD)" data-alt-value="" autocomplete="off"/>
<button type="button" class="btn btn-secondary"
id="filters_startDate_btn"
data-inputfield="filters_startDate"
data-dayformat="%Y-%m-%d"
data-button="filters_startDate_btn"
data-firstday="0"
data-weekend="0,6"
data-today-btn="1"
data-week-numbers="1"
data-show-time="0"
data-show-others="1"
data-time-24="24"
data-only-months-nav="0"
>
<span class="icon-calendar"></span>
</button>
</div>
</div>
<script>
var elements = document.querySelectorAll(".field-calendar");
for (i = 0; i < elements.length; i++) {
JoomlaCalendar.init(elements[i]);
}
</script>
UPDATE : You might also need to add JS files if there there is not calendar field already on the page.
$tag = Factory::getLanguage()->getTag();
$calendar = Factory::getLanguage()->getCalendar();
$direction = strtolower(Factory::getDocument()->getDirection());
// Get the appropriate file for the current language date helper
$helperPath = 'system/fields/calendar-locales/date/gregorian/date-helper.min.js';
if (!empty($calendar) && is_dir(JPATH_ROOT . '/media/system/js/fields/calendar-locales/date/' . strtolower($calendar)))
{
$helperPath = 'system/fields/calendar-locales/date/' . strtolower($calendar) . '/date-helper.min.js';
}
// Get the appropriate locale file for the current language
$localesPath = 'system/fields/calendar-locales/en.js';
if (is_file(JPATH_ROOT . '/media/system/js/fields/calendar-locales/' . strtolower($tag) . '.js'))
{
$localesPath = 'system/fields/calendar-locales/' . strtolower($tag) . '.js';
}
elseif (is_file(JPATH_ROOT . '/media/system/js/fields/calendar-locales/' . strtolower(substr($tag, 0, -3)) . '.js'))
{
$localesPath = 'system/fields/calendar-locales/' . strtolower(substr($tag, 0, -3)) . '.js';
}
$cssFileExt = ($direction === 'rtl') ? '-rtl.css' : '.css';
// Load polyfills for older IE
JHtml::_('behavior.polyfill', array('event', 'classlist', 'map'), 'lte IE 11');
// The static assets for the calendar
JHtml::_('script', $localesPath, false, true, false, false, true);
JHtml::_('script', $helperPath, false, true, false, false, true);
JHtml::_('script', 'system/fields/calendar.min.js', false, true, false, false, true);
JHtml::_('stylesheet', 'system/fields/calendar' . $cssFileExt, array(), true);