Full Calendar 5 - change month update url - fullcalendar

I'm using Full Calendar https://fullcalendar.io/ and have everything working as I want except for one thing. When navigating to the next/previous month I'd like the url bar to update so that it's possible to share a direct link to that month.
Currently at domain.com/events clicking next/prev moves the month but the url is not updated.
Is this possible?
In case it's relevant this is the javascript I'm using
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
start: '',
center: 'prev title next',
end: ''
},
locale: '{{ craft.app.language }}',
showNonCurrentDates: true,
fixedWeekCount: false,
// event display block removes dot
eventDisplay:'block',
eventClassNames: 'has-event',
eventColor: '#de242b',
eventBorderColor: '#fff',
eventTextColor: '#fff',
eventBackgroundColor: '#de242b',
events: [
// add in event stuff here
{% for event in craft.entries.section('events').all() %}
{% set eventEnd %}
{% if event.eventEndDate|length %}
{{ event.eventEndDate|date('Y-m-d')|json_encode|raw }} + 'T23:59:00'
{% else %}
{{ event.eventStartDate|date('Y-m-d')|json_encode|raw }} + 'T23:59:00'
{% endif %}
{% endset %}
{
title: {{ event.title|json_encode|raw }},
start: {{ event.eventStartDate|date('Y-m-d')|json_encode|raw }},
end: {{ eventEnd }},
url: {{ event.url|json_encode|raw }},
textColor: 'white',
backgroundColor:'#de242b',
},
{% endfor %}
]
});
calendar.render();
});

Related

Google Analytics 4 ecommerce is not firing within Shopify theme

I have been updating our various websites to Google Analytics 4 over the past couple of months, and I've started working on the Shopify store. I've added an ecommerce dataLayer push in a liquid file within the Sections folder, but the dataLayer doesn't get updated. It's a simple view_item event, and I've checked and double-checked for typos. As a test, I replaced the ecommerce dataLayer push with a test_event with dummy data, which fired as expected.
Is there something I'm missing here? Why won't Shopify allow my ecommerce push to the dataLayer?
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "view_item",
ecommerce: {
currency: {{ shop.currency }},
value: {{ product.price | minus: discount.amount | money_without_currency }},
items: [
{
item_id: {{ product.id }},
item_name: {{ product.title }},
affiliation: "Shopify",
coupon: {{ discount.title }},
discount: {{ discount.amount | money_without_currency }},
index: 0,
item_category: "Products",
item_category2: {{ product.type }},
item_list_id: "related_products",
item_list_name: "Related Products",
price: {{ product.price | money_without_currency }},
quantity: 1
}
]
}
});
I am using Google Tag Manager, but I can't get the dataLayer to update with the ecommerce event.
dataLayer.push({ ecommerce: null });
That word, "null", means you're cancelling the dataLayer; so, that's why it won't work. You need to remove that line to get it to work.
For anyone who might stumble onto this question, I believe I've found the issue. It's a simple case of syntax. The liquid variables which output strings need to be enclosed in quotes.
I also added conditional statements to prevent some name-value pairs from appearing with no values.
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: 'view_item',
ecommerce: {
currency: '{{ shop.currency }}',
value: {{ product.price | minus: discount.amount | money_without_currency }},
items: [{
item_id: '{{ product.id }}',
item_name: '{{ product.title }}',
affiliation: 'Shopify',
{% if discount %}
coupon: '{{ discount.title }}',
discount: {{ discount.amount | money_without_currency }},
{% endif %}
index: 0,
item_category: 'Products',
{% if product.type %}
item_category2: '{{ product.type }}',
{% endif %}
price: {{ product.price | money_without_currency }},
quantity: 1
}]
}
});

OroPlatform: override oro_datetime_widget options

Context
I am actually trying to change the default placeholder for the time input of the OroDateTimeType::class.
I want to have, for example, the text Horaires instead of Temps.
Here is my form field in my FormType :
->add('expirationDate', OroDateTimeType::class, [
'label' => 'app.subscription.fields.expirationDate',
])
And in my twig view :
form_row(form.expirationDate)
Issue
At the beginning, I have tried to used the Symfony 4 placeholder option for DateTime type : https://symfony.com/doc/4.4/reference/forms/types/date.html#placeholder. It doesn't work because OroDateTime use a different datepicker and it override the Symfony values on load :
{# vendor/oro/platform/src/Oro/Bundle/FormBundle/Resources/views/Form/fields.html.twig #}
{% block oro_datetime_widget %}
{% set dateValidation = {'Date' : {}} %}
{% set timeValidation = {'Time' : {}} %}
{% if required %}
{% set dateValidation = dateValidation|merge({'NotBlank' : {}}) %}
{% set timeValidation = timeValidation|merge({'NotBlank' : {}}) %}
{% endif %}
{% if attribute(attr, 'class') is defined %}
{% set attrClass = attr['class'] %}
{% else %}
{% set attrClass = '' %}
{% endif %}
{% set options = {
view: 'oroui/js/app/views/datepicker/datetimepicker-view',
nativeMode: isMobileVersion(),
dateInputAttrs: {
placeholder: 'oro.form.choose_date'|trans,
id: id,
name: id,
class: 'input-small datepicker-input ' ~ attrClass,
'data-validation': dateValidation|json_encode(constant('JSON_FORCE_OBJECT')),
'aria-live': 'assertive',
autocomplete: 'off',
autocorrect: 'off',
autocapitalize: 'off'
},
datePickerOptions: {
altFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: years|default('-80:+1'),
showButtonPanel: true
},
timeInputAttrs: {
placeholder: 'oro.form.choose_time'|trans,
id: 'time_selector_' ~ id,
name: 'time_selector_' ~ id,
class: 'input-small timepicker-input ' ~ attrClass,
'data-validation': timeValidation|json_encode(constant('JSON_FORCE_OBJECT'))
},
timePickerOptions: {
}
} %}
{% set id = 'hidden_' ~ id %}
{% set attr = attr|merge({
'data-page-component-module': 'oroui/js/app/components/view-component',
'data-page-component-options': options|json_encode(constant('JSON_FORCE_OBJECT'))
}) %}
{{ block('datetime_widget') }}
{% endblock oro_datetime_widget %}
If I change the value timeInputAttrs.placeholder from the options variable. It works.
But, I want to pass this variable to my specific form field, not globally.
UPDATE
I finally choose to change the oro.form.choose_time translation in my project globally.
So, in my Resources/translations/messages.fr_FR.yml I've created these lines :
oro:
form:
choose_time: Horaires
auth:
description:
main: Baltimore
Then, I've understand that translations are generated in a file located in var/cache/dev/translations/catalogue.fr_FR :
<?php
use Symfony\Component\Translation\MessageCatalogue;
$catalogue = new MessageCatalogue('fr_FR', array (
'messages' =>
array (
'oro.form.choose_time' => 'Temps',
'oro.auth.description.main' => 'Baltimore',
Here, I can see that the oro.auth.description.main change is applied, but the value for the key oro.form.choose_time is still the same.
Maybe I have a command to run ?
The easiest way to override any text in the Oro application UI is to override a translation for the message used to render it. As the form placeholder is translated as well, you can use this technic. If it's the only customization you need for the form, follow this guide.
If you want to override an HTML, you can extend the template by following the template overriding guide.
But, as you want to modify the label for a single form, then the best way would be to extend the form type and override the single form field with new options.

OroPlatform: override Oro bundle template

Context
I'm trying to override the following template : vendor/oro/platform/src/Oro/Bundle/OrganizationBundle/Resources/views/BusinessUnit/update.html.twig
This template seems to belong to the OroOrganizationBundle bundle.
Issue
So, I have tried to put my override in the following path : templates/bundles/OroOrganizationBundle/BusinessUnit/update.html.twig according to Symfony 4.X documentation : https://symfony.com/doc/4.4/bundles/override.html#templates
I have cleared the cache : symfony console cache:clear but nothing changes.
Here is my override template :
{% extends 'OroOrganizationBundle:BusinessUnit:update.html.twig' %}
{% block content_data %}
{% set id = 'business_unit-profile' %}
{% set dataBlocks = [{
'title': 'General'|trans,
'class': 'active',
'subblocks': [{
'title': '',
'data': [
form_widget(form.appendUsers, {'id': 'businessUnitAppendUsers'}),
form_widget(form.removeUsers, {'id': 'businessUnitRemoveUsers'}),
form_row(form.name),
form_row(form.parentBusinessUnit),
form_row(form.phone),
form_row(form.website),
form_row(form.email),
form_row(form.fax),
]
}]
}] %}
{% set dataBlocks = dataBlocks|merge(oro_form_additional_data(form, 'Additional Override'|trans)) %}
{% set dataBlocks = dataBlocks|merge([{
'title' : 'oro.organization.businessunit.users.label'|trans,
'subblocks': [{
'title' : null,
'useSpan': false,
'data' : [dataGrid.renderGrid(gridName, {business_unit_id: entityId}, { cssClass: 'inner-grid' })]
}]
}] ) %}
{% set data = {
'formErrors': form_errors(form)? form_errors(form) : null,
'dataBlocks': dataBlocks
} %}
{{ parent() }}
{% endblock content_data %}
Here is the output of the following command line : symfony console debug:twig | grep Organization
Finally, I found a solution using this article from Oro documentation : https://doc.oroinc.com/frontend/back-office/templates/
The right path for my case was : src/Resources/OroOrganizationBundle/views/BusinessUnit/update.html.twig
I have tried to use the "extends" method from the Symfony documentation : https://symfony.com/doc/4.4/bundles/override.html#templates which consist to override only a specific block part. In my case, I needed to copy the entire file but it works.

Webpack Encore - OpenLayers : why is not exported properly

Im trying to use the OpenLayers library in my symfony application. Im using Webpack encore for managing my assets. I've used npm to download the OpenLayers library.
When im trying to use it inside a js file, only the first 'ol' class is available, the classes underneath it are not. In browser the ol.layer.Tile class is not recognised and throws an exception(Uncaught type error).
// map.js
require('../css/map.css');
const ol = require('ol');
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
//map.html.twig
{% extends '::base.html.twig' %}
{# STYLESHEETS-------------------------------------------------- #}
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('build/map.css') }}" rel="stylesheet" />
{#<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" type="text/css"/>#}
{% endblock %}
{# JAVASCRIPTS-------------------------------------------------- #}
{% block javascript %}
{{ parent() }}
{#<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>#}
<script src="{{ asset('build/map.js') }}"></script>
{% endblock %}
{# PAGE CONTENT-------------------------------------------------- #}
{% block title %}OpenLayers example{% endblock %}
{% block body %}
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
</body>
{% endblock %}
No need to add script tag if you are using require
`{#<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>#}`
You should require also Tile, View
var ol_Map = require('ol/map').default;
var ol_layer_Tile = require('ol/layer/tile').default;
var ol_source_OSM = require('ol/source/osm').default;
var ol_View = require('ol/view').default;
var map = new ol_Map({
target: 'map',
layers: [
new ol_layer_Tile({
source: new ol_source_OSM()
})
],
view: new ol_View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
See the document from OpenLayers http://openlayers.org/en/latest/doc/tutorials/browserify.html

Sonata Admin seach block give the following error

i try to use the search block in Sonata admin:
An exception has been thrown during the rendering of a template ("Class does not exist").
and these errors:
}, { 'query': query, 'admin_code': admin.code, 'page': 0, 'per_page': 10, 'icon': group.icon }) }} {% endif %} {% endfor %} {% endif %} {% endfor %}
this problem is displayed when no entity exists for some Bundle, i mean Bundles without Entities.
I solved this Problem by escaping these Bundles in search.html.twig:
{% if admin.code!= 'bundle.admin.bulkcoupon' and admin.code!='bundle.admin.tools' %}
{{ sonata_block_render({
'type': 'sonata.admin.block.search_result'
}, {
'query': query,
'admin_code': admin.code,
'page': 0,
'per_page': 10,
'icon': group.icon
}) }}
{% endif %}

Resources