Hello,
I haven’t worked in a calendar layout in well over a year. Does Glide no longer have that wonderful scrolling list of calendar items? I only see the literal calendar layout. How do I get back to the scrolling list of calendar items?
Thanks,
Mona
No, the calendar list style doesn’t exist in New Apps.
I’m very slowly rebuilding my classic app as a new app. In my old classic app I needed a customized version of the calendar list to show some additional information while remaining tight and concise to show as much info as needed on the screen without unnecessary scrolling. I ended up using a card style list with some very heavy CSS to make it look like the original calendar list layout. Look wise it’s very similar but functions slightly differently.
Since I won’t have the same options in the new app, I think I may attempt to do something similar with HTML and a custom collection. Haven’t gotten that far yet, but I’m hopeful I can come up with something reasonably close. The only downside is that for some reason Glide doesn’t allow for Grouping in a custom collection.
Thanks for the reply. Unfortunately, once you start talking CSS and HTML, I feel that it completely contradicts the whole concept of Glide supposedly meant for non-coders. I don’t know if true IT people consider CSS and HTML to be “code” or the equivalent of what I due with simple Excel formulas. However, CSS and HTML are beyond my skill set. This is why I wish that Glide had just stuck to the original Glide Apps.
I hear ya. I always say to myself that Glide components are always 90% complete. So close, but never quite there as far as feeling complete. It’s like different people developed each component without having any design standards in place and without talking with the other developers.
Some components have formatting options that don’t match those of other very similar components. For example, why can I center text here, but not there. Why can I lay out the data one way here, but it’s another way there.
Some components have large margins and extra padding, so it’s hard to get a dense version of the relevant information on one screen. I want to see data. Not a bunch of space. I can easily add space, but I can’t easily take it away
My biggest complaint is that some components display data in a way that’s almost white on white, or light grey on white, and distinction between items is much to subtle. So visually it’s very hard to focus the eyes on the relevant data, especially if you are stuck with mediocre monitors that don’t handle colors well And then you get things like the custom collection, which won’t let you do dark backgrounds so separate list items get lost among the others.
I’ve spent hours messing with components many different ways, and in ways they were not intended, just to get anything remotely close to a look I like, but then I have all kinds of extra space, or little blips of pixels that look bad. For example, the Action Row component can give me a heading and value with nice font size, color, and bolding that no other component can give, but when you don’t want any actions on that component, you are stuck with the remnants of an inactive empty button. It just looks bad.
Half the time I end up building my own components, that look very very similar to native components, but present the data in a way that’s much more clear and concise to the user.
I am a software engineer by day, so things like CSS and HTML are mild compared to code, but yes I understand that it is not in everyone’s skill set. While I don’t expect a full gamut of options from a Glide, I do wish that there was at least some consistency among all components, and that there was at least some very basic design options that were added, such as font weight and size, and some mild control over margins and padding. The rest of the gaps I can fill in.
@fluittsolutions Never realized how much I liked/used the ‘Agenda’ view/list in Calendar.
It is a big misstep to not offer that view in the Calendar Collection. It was one of the most elegant Glide looks.
Jeff - have you been able to replicate the look and feel using a list view? I can’t use a custom collection since I want the Agenda on the left size of the screen and you can’t put a custom collection within a container.
#BRING_BACK_AGENDA_VIEW
No, I haven’t tackled it yet. When I get around to that point, I will be using HTML in a rich text component in a custom collection. I won’t be trying to manipulate a list using heavy CSS like I did above my classic app. I’m trying to simplify and be less reliant on hacky workarounds, although HTML and rich text are arguably borderline hacky.
Do you know of anyway to use an image generator with Glide?
My thought is turning the start/end time for a meeting into an image and use that in a list (still need to figure that out). The image would look something like below. Voila, I get the look 'n feel of agendas in list format.
You could do that with Cloudinary.
I seem to be overwhelmed with generative AI image creation sites rather than something simpler like creating an image from two ‘numbers/texts’
shrug, that’s exactly how I do it.
The heck with AI (even though I used it to generate this code quickly 
).
You could use javascript to create a DataURI Image from text inputs and display it in an image container. This is extremely crude and could use some cleanup and refinement, but it would give you what you are looking for.
// Function to generate a Data URI image from two text inputs
function generateImage(text1, text2) {
// Create a canvas element
var canvas = document.createElement('canvas');
canvas.width = 300; // Set the canvas width
canvas.height = 300; // Set the canvas height
// Get the 2D rendering context
var ctx = canvas.getContext('2d');
// Set background color
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Set text properties
ctx.font = '20px Arial';
ctx.fillStyle = '#000000';
// Display text on the canvas
ctx.fillText(text1, 50, 50);
ctx.fillText(text2, 50, 100);
// Convert the canvas content to a Data URI
var dataUri = canvas.toDataURL();
return dataUri;
}
// Example usage
var text1 = "Hello";
var text2 = "World";
return generateImage(text1, text2);
Shoot, thinking about it more, we could actually create our own text overlays on top of images. Here is a modified version that also accepts an image input and overlays text on top. Kind of our own cloudinary inside of Glide.
// generateImage.js
// Function to generate a Data URI image from text inputs and overlay on an image
function generateImage(imageUrl, text1, text2) {
// Create an image element
var image = new Image();
image.crossOrigin = "anonymous"; // Allow cross-origin requests for images
image.src = imageUrl;
// Create a canvas element
var canvas = document.createElement('canvas');
canvas.width = image.width; // Set the canvas width to the image width
canvas.height = image.height; // Set the canvas height to the image height
// Get the 2D rendering context
var ctx = canvas.getContext('2d');
// Draw the image on the canvas
ctx.drawImage(image, 0, 0);
// Set text properties
ctx.font = '20px Arial';
ctx.fillStyle = '#000000';
// Display text on the canvas
ctx.fillText(text1, 50, 50);
ctx.fillText(text2, 50, 100);
// Convert the canvas content to a Data URI
var dataUri = canvas.toDataURL();
return dataUri;
}
// Example usage
var imageUrl = 'https://dummyimage.com/300x300/bab1ba/fff';
var text1 = "Hello";
var text2 = "World";
return generateImage(imageUrl, text1, text2);
Gunna give it a try! Thanks
Looks good!
Very cool stuff! Do you think it could work with an image stored in public google drive folder? I’ve been at for a day with no luck. AI suggested I convert my drive links to ‘direct image links’… no success either. Is there a technical limitation I’m missing?
// generateImage.js
// Function to generate a Data URI image from text inputs and overlay on an image
function generateImage(imageUrl, text1, text2) {
// Create an image element
var image = new Image();
image.crossOrigin = "anonymous"; // Allow cross-origin requests for images
image.src = imageUrl;
// Create a canvas element
var canvas = document.createElement('canvas');
canvas.width = image.width; // Set the canvas width to the image width
canvas.height = image.height; // Set the canvas height to the image height
// Get the 2D rendering context
var ctx = canvas.getContext('2d');
// Draw the image on the canvas
ctx.drawImage(image, 0, 0);
// Set text properties
ctx.font = '20px Arial';
ctx.fillStyle = '#000000';
// Display text on the canvas
ctx.fillText(text1, 50, 50);
ctx.fillText(text2, 50, 100);
// Convert the canvas content to a Data URI
var dataUri = canvas.toDataURL();
return dataUri;
}
// Example usage
var imageUrl = 'https://dummyimage.com/300x300/bab1ba/fff';
var text1 = "Hello";
var text2 = "World";
return generateImage(imageUrl, text1, text2);
No reason why it wouldn’t, as long as the image URL is public.
Elaborate?
Share a version of your non-working code, perhaps? (I assume what you pasted isn’t it).
My current iteration works with glide uploaded images but not my google drive ones. Drive folder is public and the regular images work in the app.
Here’s what the end goal would look like.
This should work as is.
// Function to generate a Data URI image from text inputs and overlay on an image
function generateImage(imageUrl, text1, text2) {
return new Promise((resolve, reject) => {
// Create an image element
var image = new Image();
image.crossOrigin = "anonymous"; // Allow cross-origin requests for images
image.src = imageUrl;
// Handle the image load event
image.onload = function () {
// Create a canvas element
var canvas = document.createElement('canvas');
canvas.width = image.width; // Set the canvas width to the image width
canvas.height = image.height; // Set the canvas height to the image height
// Get the 2D rendering context
var ctx = canvas.getContext('2d');
// Draw the image on the canvas
ctx.drawImage(image, 0, 0);
// Set text properties
ctx.font = '20px Arial';
ctx.fillStyle = '#000000';
// Display text on the canvas
ctx.fillText(text1, 50, 50);
ctx.fillText(text2, 50, 100);
// Convert the canvas content to a Data URI
var dataUri = canvas.toDataURL();
// Resolve the promise with the generated data URI
resolve(dataUri);
};
// Handle the image error event (if needed)
image.onerror = function () {
reject(new Error("Failed to load the image."));
};
});
}
// Example usage
var imageUrl = 'https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/aDL19PhHCqg7Rwq7bziB/pub/8eeVlQ2ijANjgUxl1v5q.jpeg';
var text1 = "Hello";
var text2 = "World";
return generateImage(imageUrl, text1, text2);
Works for me 
Or do you mean you can’t get the text positioned as you want?
Need to define what is meant by “not working”.
Oh sorry let me clarify. The code I pasted above works because the image is stored in Glide.
Here’s a link that doesn’t work with GDrive.
(https://drive.google.com/uc?id=1Ue6kH9HS8f6y9Pz1LSNI2gxz_3LjKNDD)
Not working.
// Function to generate a Data URI image from text inputs and overlay on an image
function generateImage(imageUrl, text1, text2) {
return new Promise((resolve, reject) => {
// Create an image element
var image = new Image();
image.crossOrigin = "anonymous"; // Allow cross-origin requests for images
image.src = imageUrl;
// Handle the image load event
image.onload = function () {
// Create a canvas element
var canvas = document.createElement('canvas');
canvas.width = image.width; // Set the canvas width to the image width
canvas.height = image.height; // Set the canvas height to the image height
// Get the 2D rendering context
var ctx = canvas.getContext('2d');
// Draw the image on the canvas
ctx.drawImage(image, 0, 0);
// Set text properties
ctx.font = '20px Arial';
ctx.fillStyle = '#000000';
// Display text on the canvas
ctx.fillText(text1, 50, 50);
ctx.fillText(text2, 50, 100);
// Convert the canvas content to a Data URI
var dataUri = canvas.toDataURL();
// Resolve the promise with the generated data URI
resolve(dataUri);
};
// Handle the image error event (if needed)
image.onerror = function () {
reject(new Error("Failed to load the image."));
};
});
}
// Example usage
var imageUrl = 'https://drive.google.com/uc?id=1Ue6kH9HS8f6y9Pz1LSNI2gxz_3LjKNDD';
var text1 = "Hello";
var text2 = "World";
return generateImage(imageUrl, text1, text2);
That’s the next step. I was about to try cloudinary for first time until I saw Jeff’s post the other day. Been at it ever since…
Okay, I see.
I think the problem is that the share link that Google gives you isn’t actually a direct link to the image.
So it probably requires some special handling - I’m thinking you probably have to fetch the image separately, and then pass the image data to the rest of the script. I’m not sure, I’d need to play with it a bit.