I'm trying to add a background color to an event but with no luck.
$('#calendar').fullCalendar('renderEvent', { id: 1, title: 'hello', start: selected_date, allDay: true, color: '#FF0000', backgroundColor: '#000000' }, false);
Any idea why this won't work? The border color seems to work but not the backgroundColor
If you add both the stylesheets then the backgroundColor will not work.
<link rel="Stylesheet" type="text/css" href="/Content/fullcalendar/fullcalendar.css" />
<link rel="Stylesheet" type="text/css" href="/Content/fullcalendar/fullcalendar.print.css")" />
After removing the fullcalendar.print.css then the backgroundColor decided to render correctly.
Add the media attribute
<link href="../css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link media='print' href="../css/fullcalendar/fullcalendar.print.css" rel="stylesheet" type="text/css" />
I was setting it up in my bundle config in asp but that didn't add the media property so it was an issue.
The background color for events is defined in the fullcalendar.css file under the section
/* Global Event Styles
(Line 261, in version 2.0 beta)
You can access it programmatically like this:
$('.fc-event').css('background-color','#3a87ad');
Try to make it stick (change false parameter to true, at the end), probably a new event is overlapping and make it change properties.
"Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar.", from Documentation, http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
Here is how I did it: I placed backgroundColor in the chart event:
chart: {
type: 'column',
backgroundColor: 'transparent'
},
try this may be it works for you.
background: '#eeeef0
Do not write backgroundColor.
Related
I'm having trouble with AMP and CSS in Next.js. In my head component I have:
<Head>
<style amp-custom>{`
// CSS Here
`}</style>
</Head>
In the HTML source it shows up as <style amp-custom=""></style><style>(CSS Here)</style>
In the console I get this error: The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom (transformed)'.
How can I work with AMPHTML's rules on CSS and Next both? Every other method I've tried (such as importing from a file using #zeit/next-sass) causes the CSS to not be rendered at all. This is the only working version I've found.
Try this:
<Head>
<style
amp-custom=""
dangerouslySetInnerHTML={{
__html: `
amp-img {
border: 1px solid black;
}
`,
}}
></style>
</Head>
...It has to be: <style jsx>...</style>. Very dumb mistake that I've been looking for workarounds on all day. :/
As of Sept 2020, I've been having this issue too. I'm new at this, but with no help from the official tutorials. I did find a workaround.
First, I want to point out a couple of things from Next.js that they tell you.
non-AMP page styles are usually placed in _document.js from the next.js example.
</Head>
<style jsx global>{ reset }</style>
<style jsx global>{ globals }</style>
<body>
<Main />
<NextScript />
</body>
They mention in the tutorial to put <style amp-custom>. They don't say where, but it should be within the <Head></Head> of index.js (or whatever .js file for individual pages) OR _document.js for every page.
Ok, sounds good, BUT it's partially wrong!
I will explain what I found it does when turn on amp pages on in Next.JS.
So on an individual page, such as index.js, you need to this code at the top:
export const config = {
amp: true,
}
Then you have to put this in the return function:
const isAmp = useAmp()
Standard instructions from the tutorial. Now AMP is turned on, here's what happens:
Anything in <style amp-custom> is turned into a <style>
anything that is in <style jsx> is turned into a <style amp-custom> tag.
In addition to #2, it injects a unique random index that ruins any css code in that gets put into the generated <style amp-custom> tag.
<style amp-custom>.jsx-2373233908{/* your CSS code that you put in <style jsx> from before */}</style>
and that .jsx-########### throws a "/ error CSS syntax error in tag 'style amp-custom' - incomplete declaration." when you try to compile.
Is this opposite and odd behavior. YES. I don't get why it does it, but I'm a newb.
So my workaround goes like this:
Install your CSS framework package or put your CSS file into the styles folder (let's say located at : ./styles/styles.css)
I also add raw loader from your terminal window. Because I like to put my css in a file, not type it inlined with the code. Let's be realistic, you're going to separate CSS and you'll need to load that file in.
npm install raw-loader --save-dev
Load the CSS in your _document.js (here's my whole _document.js). I use "}" and "{" with fixCSS to escape the .jsx-########### and the injected code magically disappears.
import Document, { Html, Head, Main, NextScript } from 'next/document'
import styleCSS from '!!raw-loader!../styles/styles.css';
const fixCSS = `}${styleCSS}{`;
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="en">
<Head>
</Head>
<style jsx>{`
${fixCSS}
` }</style>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
That's it. Now your imported CSS is shown on AMP pages. Remember this is for sept 2020 using these packages in my package.json:
"dependencies": {
"amp": "^0.3.1",
"next": "^9.5.3-canary.25",
"next-env": "^1.1.1",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"cssnano": "^4.1.10",
"now": "^19.2.0",
"raw-loader": "^4.0.1"
},
Try:
<style jsx amp-custom>
`
... my css
`
</style>
I just tested it out and it worked okay. Not the best approach, NextJS should document the ways to add css in somewhere.
This worked:
const ampStyle = `h1{color:red;}`
<style jsx>{ampStyle}</style>
So I have FullCaledar working...loading events from my JSON feed. However, I am not able to get my calendars to show up in different colors. I am using the latest version of FullCalendar files (v3.8.0).
My script is as follows...
<link href="../../FullCalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="../../FullCalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<script src="../../FullCalendar/lib/moment.min.js" type="text/javascript"></script>
<script src="../../FullCalendar/lib/jquery.min.js" type="text/javascript"></script>
<script src="../../FullCalendar/fullcalendar.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
eventSources: [
{
//url: '<my json URL>',
color: '#0033dd',
textColor: '#ffffff'
},
{
//url: '<my json URL>',
color: '#dd3300',
textColor: '#000000'
}
],
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
...blah, blah, blah...
The events are loading from both sources...but they all show up using the color scheme of the first source.
What am I missing?
Found the reason but not the solution. It seems that setting the allDay property as TRUE causes the event to not display. I have tried several different configurations and found that the event does not show up in any view with the allDay property set to true.
Once I set the allDay property to FALSE, my events started showing up.
I'm working on a Chrome extension that injects some UI react components into a page.
The UI components come from react-mdl. Using them requires me to include a css file in the top of my project.
Unfortunately, once the css is injected into the page, the entire page's font is changed.
Is there a way to limit the scope of the css used by react-mdl such that it doesn't affect the page into which I'm injecting?
Just posting this for posterity as accepted answer deserves credit, but if anyone finds themselves in a similar predicament, here is a snippet of the code that worked for me:
// my injected code
window.addEventListener('load', () => {
const injectDiv = document.createElement('div')
const shadowRoot = injectDiv.attachShadow({ mode: 'open' })
// note inline use of webpack raw-loader, so that the css
// file gets inserted as raw text, instead of attached to <head>
// as with the webpack style-loader
shadowRoot.innerHTML = // just using template string
`
<style>${require('raw-loader!app/styles/extension-material.css')}</style>
<div id='shadowReactRoot' />
`
document.body.appendChild(injectDiv)
ReactDOM.render(
<App />,
// note you have to start your query in the shadow DOM
// in order to find your root
shadowRoot.querySelector('#shadowReactRoot')
)
})
Then, sure enough:
I think you should use the Shadow DOM API. It is good practice for those cases when you just need to append your UI component to a webpage.
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
As mentioned in this other SO post, <link> tag is also supported, so one can simply do as follows:
const injectedDiv = document.createElement('div');
const shadowRoot = injectedDiv.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `\
<link rel="stylesheet" type="text/css" href="${chrome.extension.getURL("bootstrap.min.css")}"></link>\
<link rel="stylesheet" type="text/css" href="${chrome.extension.getURL("whatever.css")}"></link>\
`;
document.body.appendChild(injectedDiv);
Notes:
Using chrome.extension.getURL is required for getting an extension's local resource url, see e.g. in this answer.
The linked .css resources must be declared under the web_accessible_resources property in your manifest.json (otherwise, you'll get this error)
I created a dojo dialog using the example . I work with maps in background. The problem is that when the dialog is appeared, the background is blocked and i can't use the map(the dialog with no underlaying). Is there any way to enable using background when the dialog is appeard on background?
You can do it with a little hack :
require(["dijit/Dialog", "dijit/DialogUnderlay", "dojo/domReady!"], function(Dialog, DialogUnderlay){
//just for the snippets to get the right styling
document.body.className = "tundra";
myDialog = new Dialog({
title: "My Dialog",
content: "Test content.",
style: "width: 300px"
});
myDialog2 = new Dialog({
title: "My Dialog",
content: "Test content.",
style: "width: 300px"
});
showDialog2 = function () {
myDialog2.show().then(function() {
DialogUnderlay.hide()
//little hack to avoid JS error when closing the dialog
DialogUnderlay._singleton.bgIframe = {destroy: function() {}}
});
}
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<button onclick="myDialog.show();">show with underlay</button>
<button onclick="showDialog2();">show without underlay</button>
I use active column to generate dynaicly icons like this:
{xtype:'actioncolumn',
width:25,
align: 'center',
items: [{
icon: g_settings.iconUrl + 'view-icon.png' ,
tdCls : 'someClass',
handler: function()
{
alert('HI');
}]
now to add the property which I want (in this case cursor:pointer) in ExtJS forum is written to add
.someClass
{
cursor:pointer;
}
But I'm not sure where this should be written.
Thanks
Leron
Put it in your CSS file that you have included on your page (you have a CSS file, right?).
For example like this:
<link rel="stylesheet" type="text/css" href="styles.css" />
And then put the style definitions you want in the styles.css file. That's all there is to it.